Fluid CSS3 Progress Bars

A collection of fluid and lightweight CSS3 progress bars which requires no Javascript at all. These CSS3 progress bars made by Josh Sullivan.

fluid-css3-progress-bars

They work on iOS devices and are simple to use or customize, just link the css file and you’re good to go. It comes in 5 different colors and 4 different styles.

Usage

Include the stylesheet in the head:

<link rel="stylesheet" href="css3-progress-bar.css" />

Put this syntax where you want to show the progress bar. The progress far will fill the width of its containing block element. You can also change progress’ bar fill by changing the width.

<div class="bar_container">
    <div class="bar_mortice">
        <div class="progress" style="width: 40%;"></div>
    </div>
</div>

<div class="widget"> Github &amp; Download: <a href="ttps://github.com/jsullivan/CSS3-Progress-bars" target="_blank">https://github.com/jsullivan/CSS3-Progress-bars</a> </div>