Css3 Progress Bar

Now a days progress bar is a very important in any social media website and progress bar is very easy to create with just a few lines of css and some beautifull css3 transition

CSS3 Progress Bar

Download Script

View Demo

html

html is very simple it just have a div with class .bar and a span inside the div

<div class="bar">
 <span style="width:0%;"></span>
</div>

css

//style of div
.bar{
 width: 100%;
 background: #eee;
 padding: 3px;
 border-radius: 3px;
 box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2);
}
//style of span
.bar span{
 height: 20px;
 background: cornflowerblue;
 display: block;
 border-radius: 3px;
 -webkit-transition: width 0.8s ease;
 -moz-transition: width 0.8s ease;
 transition: width 0.8s ease;
}

Like Us on Facebook / Add Hunk As Friend