-2

I want to create a multicolor progress bar please help me to code. when progress less than 50 it will show red when progress is >50 and <90 it will show green and from 90 to 100 it show blue, how to do it??

Image 1

3

2 Answers 2

1

You need to create one div for the progressbar and then you just add divs inside the progressbar div. `

<div class="bar">
    <div class="fifty">
        <p>50%</p>
    </div>
    <div class="twentyfive">
        <p>25%</p>
    </div>
    <div class="ten">
        <p>10%</p>
    </div>
</div>

`

The CSS could be something like this: `

    .bar {
        width: 100%;
        height: 30px;
        border-radius: 10px;
        background-color: #b3b3b3;
        color: white;
        text-align: center;
    }

    .fifty {
        width: 50%;
        height: 100%;
        background-color: green;
        float: left;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .twentyfive {
        width: 25%;
        height: 100%;
        background-color: orange;
        float: left;
    }

    .ten {
        width: 10%;
        height: 100%;
        background-color: red;
        float: left;
    }

`

1
  • Thanks a lot.I got an idea how to do it, Apr 14, 2018 at 6:59
0

I created a multicolor progress bar. Check it on my codepen here: https://codepen.io/onlintool24/pen/dyVJrww

Just need to change the var progressval value and you can see the multicolor progress bar.

var progressval = 50;
var elm = document.getElementsByClassName('progressab')[0];
elm.style.width = progressval+"%";

elm.innerText = "You're "+progressval+"% There!";

if(progressval>90 && progressval<=100 ){   elm.style.backgroundColor = 'blue';                                 
}else if(progressval>50 && progressval<90 ){ elm.style.backgroundColor = 'green';
}else if(progressval<=50){ elm.style.backgroundColor = 'red';
}
.progressa {
    border-radius: 50px !important;
    height: 35px;
    line-height: 36px;
    font-size: 14px;
    overflow: hidden;
    height: 35px;
    margin-bottom: 20px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    line-height: 36px;
    height: 35px;
    font-size: 14px;
    border: 3px solid transparent;
}
.progressab {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
    -webkit-transition: width .25s ease,height .25s ease,font-size .25s ease;
    -moz-transition: width .25s ease,height .25s ease,font-size .25s ease;
    -ms-transition: width .25s ease,height .25s ease,font-size .25s ease;
    -o-transition: width .25s ease,height .25s ease,font-size .25s ease;
    transition: width .25s ease,height .25s ease,font-size .25s ease;
    width: 0;
    color: #fff;
    text-align: center;
    font-family: 'Open Sans',sans-serif !important;
    animation: progress-bar-stripes 2s linear infinite reverse;
}

@keyframes progress-bar-stripes{
0% {
    background-position: 40px 0;
}
100% {
    background-position: 0 0;
}
}
<div class="progressa">
<div class="progressab" style="    background-color: rgb(178, 222, 75);"></div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.