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??
-
Show your code first or google it. Ex:w3schools.com/bootstrap/…– ZnaneswarApr 14, 2018 at 6:07
-
You need to at least try it and present code sample you have worked on.– T04435Apr 14, 2018 at 6:24
-
Have you checked the docs? getbootstrap.com/docs/4.1/components/progress/#multiple-bars– KloovenApr 14, 2018 at 6:30
2 Answers
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;
}
`
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>