Please wait...

Progress Bars

60% Complete
75%

CONTEXTUAL ALTERNATIVES Progress bars use some of the same button and alert classes for consistent styles.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

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

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

ANIMATED Add .activeto .progress-bar-stripedto animate the stripes right to left. Not available in IE9 and below.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

STACKED Place multiple bars into the same .progressto stack them.

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

WITH MATERIAL DESIGN COLORS You can use material design color which examples are .bg-pink, .bg-redclass

PINK PROGRESS BAR
CYAN PROGRESS BAR
TEAL PROGRESS BAR
ORANGE PROGRESS BAR