<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 "
*/