JSFiddle - React, Tailwind, and code Playground

by kpowz

HTML

<section>
    <h3>Single, Determinite Progress Bar</h3>
    <progress id='progress-month-sales' value="10000" max="30000" >        </progress>  
    <span class="progress-value">10,0000 of 30,000</span>
</section>


<section>
     <h3>Layered Progress Bar (layers)</h3>
    <progress id='progress-month-sales-inprogress' value="15000" max="30000" class='progress-relative'></progress> 
    <progress id='progress-month-sales' value="10000" max="30000" class='progress-relative'></progress> 
    
    
</section>

<section>
     <h3>Layered Progress Bar (absolute)</h3>
    <progress id='progress-month-sales' value="10000" max="30000" class='progress-absolute'></progress> 
    <progress id='progress-month-sales-inprogress' value="15000" max="30000" class='progress-absolute'></progress> 
    
    
    
</section>

CSS

.progress-absolute{
    position:absolute;
    top: 225px; 
    left: 10px;
    

}

section{
    margin-top: 1.5em;
    margin-bottom: .5em;
}

progress{
    border: 2px solid #ccc;
    background: rgba(228, 228, 228, 0);
}

progress.progress-absolute {
 // opacity: 0.7; 
}

#progress-month-sales::-webkit-progress-value { 
    background: rgba(59, 163, 132, 1); 
       
}
#progress-month-sales::-webkit-progress-bar { 
    background: rgba(228, 228, 228, .7);    
}

#progress-month-sales-inprogress::-webkit-progress-value { 
    background: rgba(116, 240, 203, .5); 
    
}
#progress-month-sales-inprogress::-webkit-progress-bar { 
    background: rgba(228, 228, 228, 0.1);    
}

JavaScript

//$('.progress-value').html(10000/30000 + '%');