JSFiddle - React, Tailwind, and code Playground

by GopsAB

HTML

<progress max="100" value="70"></progress>
<br><br><br>   
<meter max="100" value="50"></meter>
    
    <p>  This fiddle is created by Gops AB fot testing of html5 range and progress elements' styling.
        The progress element represents the completion progress of a task.Whereas The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.  </p>

CSS

meter::-webkit-meter-optimum-value
{
    background-image:linear-gradient(white ,#AAA 30%)
}
meter::-webkit-meter-bar
{
    background-image:linear-gradient(white ,white 100%);
    border: 1px solid #000;
}
/*There are many options like -sub-optimum-value,-sub-sub-optimum-value*/
meter,progress
{
    width:100px;
    height:10px;
}
progress[value]
{
    -webkit-appearance: none; /* very imp. Then only we can style progress element */
}
progress[value]::-webkit-progress-bar
{
   background-color:#fff;
   border: 1px solid #000;
}
progress[value]::-webkit-progress-value
{
    background-color: #0063cc;
}