Progress Bars

Basic

Create elegant progress bars to show key information or data. Style them easily with a range of different styling classes.

Photoshop
20%
Illustrator
30%
inDesign
50%
Dreamweaver
80%
Example
								
									
20%
30%
50%
80%

Addtional Styles

Style the progress bars by using a combination of size class, background color/border-color, text color classes and border style classes. See Styling Classes for more examples.

The example below illustrates the use of size classes, background color/border color and style classes. It also uses the Horizon Reveal plugin to animate the progress bars once in view. Note: Horizon Reveal requires jquery.min.js and jquery.tm.horizon.min.js. See Horizon Plugin for more information on animation parameters.

Photoshop
20%
Illustrator
30%
InDesign
50%
Dreamweaver
80%
Example
								
									
20%
30%
50%
80%
Theme Mountain

Current Version