<progress max="100" value="10">10%</progress>
<progress max="100" value="20">20%</progress>
<progress max="100" value="30">30%</progress>
<progress max="100" value="50">50%</progress>
<progress max="100" value="60">60%</progress>
<progress max="100" value="90">90%</progress>
<progress max="100" value="100">100%</progress>
progress[value] {
--w:200px;
--b:
/* if < 30% "red" */
linear-gradient(red,red) 0 /max(0px,var(--w)*.3 - 100%) 1px,
/* else if < 60% "orange" */
linear-gradient(orange,orange) 0 /max(0px,var(--w)*.6 - 100%) 1px,
/* else "green" */
green;
appearance: none;
border: none;
width: var(--w);
height: 20px;
display:block;
margin:10px;
background-color: lightgrey;
border-radius: 50px;
}
progress[value]::-webkit-progress-bar {
background-color: lightgrey;
border-radius: 50px;
}
progress[value]::-webkit-progress-value {
border-radius: 50px;
background:var(--b);
}
progress[value]::-moz-progress-bar {
border-radius: 50px;
background:var(--b);
}
/*
I am using "linear-gradient(X,X) instead of "linear-gradient(X 0 0)"
for better browser support "
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.