Progress Bar

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

The progress bars can be colored with traditional theme colors plus new accent colors. Below is a list of possible color class names:

• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-dark
• .bg-primary
• .bg-highlight
• .bg-standout

Example:

Source Code:

    

        60%
    

Progress Bars Variety

Progress bars sizes and variations.

Project Completeness

Project Completeness 73%

Source Code:

    

        60%
    


Project Completeness

    

        
83%
    



Project Completeness 73%

    

Striped Progress Bars

Uses a gradient to create a striped effect. Not available in IE9 and below.

Source Code:

    

        60%
    

Animated Progress Bars

Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.

Source Code:

    

        60%
    

Stacked Progress Bars

Place multiple bars into the same .progress to stack them.

Source Code:

    

        35% Complete (success)
    
    

        20% Complete (warning)
    
    

        10% Complete (danger)