Layered Progress Elements

Two different CSS techniques for layering the HTML progress element. The idea sprang from wanting to represent some type of pending progress.

by kpowz

HTML

<section>
    <h2>Single, Determinate Progress Bar</h2>
    <progress value="10000" max="30000" ></progress>  
    <span class="progress-value">10,0000 of 30,000</span>
</section>


<section class="opacity">
      <h2>Opacity</h2>
    <section>
        <h3>Layered Progress Bar (layers)</h3>
        <progress id='progress-inprogress-opacity' value="35" max="40" ></progress> 
        <progress id='progress-opacity' value="20" max="40" ></progress> 
    </section>

    <section>
        <h3>Layered Progress Bar (absolute)</h3>
        <progress id='progress-inprogress-opacity' value="35" max="40" class='progress-absolute'></progress> 
        <progress id='progress-opacity' value="20" max="40" class='progress-absolute'>         </progress>  
    </section>   
</section>

<section class="rgba">
    <h2>RGBA</h2>
    <section>    
        <h3>Layered Progress Bar (layers)</h3>
        <progress id='progress-rgba' value="20" max="40" ></progress> 
        <progress id='progress-inprogress-rgba' value="35" max="40" ></progress>        
    </section>
    <section>
        <h3>Layered Progress Bar (absolute)</h3>
        <p>Order of the progress bars is important here. Adjust the RGBA background transparency so that the bottom progress bar (first to appearin the DOM) 'breaks through'. </p>
         <progress id='progress-rgba' value="20" max="40" class='progress-absolute'>    </progress>
        <progress id='progress-inprogress-rgba' value="35" max="40" class='progress-absolute'></progress> 
       
    </section>
</section>

CSS

.progress-absolute{
    position: absolute; 
    left: 10px;
}

.opacity .progress-absolute{ 
    top: 260px; 
}

.rgba .progress-absolute{  
    top: 545px; 
}

section{   
    margin-bottom: 1em;
}
section.rgba {
    margin-top: 3.5em;
}

progress {
  border: 2px solid #919191;    
}

/*
*opacity
*/
.opacity progress{
    opacity: 0.7;
}

#progress-inprogress-opacity::-webkit-progress-value { 
    background: #74F0CB; 
    
}
#progress-opacity::-webkit-progress-value { 
    background: #3BA384;  
}

progress::-webkit-progress-bar { 
     background: #e4e4e4;
}

/*
*rgba
*/
.rgba progress{    
    background: rgba(228, 228, 228, 0);
}


#progress-rgba::-webkit-progress-value { 
    background: rgba(59, 163, 132, 1);  
}
#progress-inprogress-rgba::-webkit-progress-value { 
    background: rgba(116, 240, 203, .5);
}
#progress-rgba::-webkit-progress-bar { 
    background: rgba(228, 228, 228, .7);    
}
#progress-inprogress-rgba::-webkit-progress-bar { 
    background: rgba(228, 228, 228, 0.1);    
}

JavaScript

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