Loading Bar

Just a simple loading bar in full css

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

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, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
	box-shadow: 0px 0px 12px...

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); 
	});
});