Nice Sparkle Progress Bars

Shiny Sparkle Progress bars with percentage label. The sparkles inside the bars are created using a combination of linear-gradient and radial-gradient as the background and then animated using the animation and keyframes properties. However, the label for percentage is animated using jQuery. by Philipp von Wedel http://cssdeck.com/user/pvonwedel

by bitstarr

HTML

<div class="progressbar" data-perc="100">
    <div class="bar"><span></span></div>
    <div class="label"><span></span></div>
</div>
<div class="progressbar" data-perc="75">
    <div class="bar color2"><span></span></div>
    <div class="label"><span></span></div>
</div>
<div class="progressbar" data-perc="50">
    <div class="bar color3"><span></span></div>
    <div class="label"><span></span></div>
</div>
<div class="progressbar" data-perc="25">
    <div class="bar color4"><span></span></div>
    <div class="label"><span></span></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Aldrich);

body{background:#333;}
.progressbar{
    position:relative;
    display:block;
    width:560px;
    height:20px;
    padding:10px 20px;
    border-bottom:1px solid rgba(255,255,255,0.25);
    border-radius:16px;
    margin:40px auto;
    -webkit-box-shadow: 0px 4px 4px -4px rgba(255, 255, 255, 0.4),0px -3px 3px -3px rgba(255, 255, 255, 0.25),inset 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 4px 4px -4px rgba(255, 255, 255, 0.4),0px -3px 3px -3px rgba(255, 255, 255, 0.25),inset 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}
.progressbar:before{
    position:absolute;
    display:block;
    content:"";
    width:558px;
    height:18px;
    top:10px;
    left:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    background:#222;
    -webkit-box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.85);;
    box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.85);
    border:1px solid rgba(0,0,0,0.8);
}
.bar {
    position:absolute;
    display:block;
    width:0px;
    height:16px;
    top:12px;
    left:22px;
    background: rgb(126,234,25);
    background: -moz-linear-gradient(top,  rgba(126,234,25,1) 0%, rgba(83,173,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(126,234,25,1)), color-stop(100%,rgba(83,173,0,1)));
    background: -webkit-linear-gradient(top,  rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
    background: -o-linear-gradient(top,  rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
    background: -ms-linear-gradient(top,  rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
    background: linear-gradient(to bottom,  rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7eea19', endColorstr='#53ad00',GradientType=0 );
    -webkit-border-radius:16px;
    border-radius:16px;
    -webkit-box-shadow: 0px 0px 12px 0px rgba(126, 234, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255,...

JavaScript

$(function() {
        
    $('.progressbar').each(function(){
        var t = $(this),
            dataperc = t.attr('data-perc'),
            barperc = Math.round(dataperc*5.56);
        t.find('.bar').animate({width:barperc}, dataperc*25);
        t.find('.label').append('<div class="perc"></div>');
        
        function perc() {
            var length = t.find('.bar').css('width'),
                perc = Math.round(parseInt(length)/5.56),
                labelpos = (parseInt(length)-2);
            t.find('.label').css('left', labelpos);
            t.find('.perc').text(perc+'%');
        }
        perc();
        setInterval(perc, 0); 
    });
});