Progress Bars

Progress Bars

Provide up-to-date feedback on the progress of a workflow or action.

Uncharted: The Lost Legacy

80% Complete

Star Wars: Battlefront 2

55% Complete

Call of Duty WW2

32% Complete
Loaded

Use .progress-loaded to animate the progress bars.

Uncharted: The Lost Legacy

80% Complete

Star Wars: Battlefront 2

55% Complete

Call of Duty WW2

32% Complete
Sizes

Set the progress bar size by adding to progress class .progress-lg or .progress-sm

Uncharted: The Lost Legacy

80% Complete

Star Wars: Battlefront 2

55% Complete

Call of Duty WW2

32% Complete
Animated

Add .active to .progress-bar-striped to animate the stripes right to left.

80% Complete