JSFiddle - React, Tailwind, and code Playground

Stylish CSS3 progress bars

by Jennifer Perrin

HTML

<div class="progress-bar blue stripes">
    <span style="width: 40%"></span>
</div>
<p>Set above to:
    <a href="#" class="quarter">25%</a> /
    <a href="#" class="half">50%</a> /
    <a href="#" class="three-quarters">75%</a> /
    <a href="#" class="full">100%</a>
</p>

<div class="progress-bar orange shine">
    <span style="width: 65%"></span>
</div>
<p>Set above to:
    <a href="#" class="quarter">25%</a> /
    <a href="#" class="half">50%</a> /
    <a href="#" class="three-quarters">75%</a> /
    <a href="#" class="full">100%</a>
</p>

<div class="progress-bar green glow">
    <span style="width: 55%"></span>
</div>
<p>Set above to:
    <a href="#" class="quarter">25%</a> /
    <a href="#" class="half">50%</a> /
    <a href="#" class="three-quarters">75%</a> /
    <a href="#" class="full">100%</a>
</p>

CSS

body {
            background: #222;
            width: 360px;
            margin: 0 auto;  
            font: 13px 'trebuchet MS',Arial,Helvetica;
        }
    
        h2, p {
            text-align: center;
            color: #fafafa;
            text-shadow: 0 1px 0 #111;    
        }
        
        a {
            color: #777;
        }

        /*---------------------------*/            
        
        .progress-bar {
            background-color: #1a1a1a;
            height: 25px;
            padding: 5px;
            width: 350px;
            margin: 70px 0 20px 0;            
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
            -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
            box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
        }
        
        .progress-bar span {
            display: inline-block;
            height: 100%;
            background-color: #777;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
            -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
            box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
            -webkit-transition: width .4s ease-in-out;
            -moz-transition: width .4s ease-in-out;
            -ms-transition: width .4s ease-in-out;
            -o-transition: width .4s ease-in-out;
            transition: width .4s ease-in-out;        
        }
        
        /*---------------------------*/            
        
        .blue span {
            background-color: #34c2e3;   
        }

        .orange span {
              background-color: #fecf23;
              background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
              background-image:...

JavaScript

$(document).ready(function(){ 
        $('.quarter').click(function(){
            $(this).parent().prev().children('span').css('width','25%');
            });
        $('.half').click(function(){
            $(this).parent().prev().children('span').css('width','50%');
            });
        $('.three-quarters').click(function(){
            $(this).parent().prev().children('span').css('width','75%');
            });
        $('.full').click(function(){
            $(this).parent().prev().children('span').css('width','100%');
            });            
    });