Please wait...

search
close

PROGRESS BARS

BASIC EXAMPLES

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 .active to .progress-bar-striped to 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 .progress to 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-red class

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