Directional Options

Progress Color

.progress-bar.bg-color
Progress Primary
Progress Secondary
Progress Success
Progress Primary
Progress Warning
Progress Danger
Progress Light
Progress Dark

With label

Add label: 50%
Progress Primary
50%
Progress Secondary
50%
Progress Success
50%
Progress Primary
50%
Progress Warning
50%
Progress Danger
50%
Progress Light
50%
Progress Dark
50%

Striped

.progress-bar-striped
Progress Striped
50%
Progress Striped
50%
Progress Striped
50%
Progress Striped
50%
Progress Striped
50%
Progress Striped
50%
Progress Striped
50%
Progress Striped
50%

Striped Animated

.progress-bar-animated
Progress Striped Animated
25%
Progress Striped Animated
25%
Progress Striped Animated
50%
Progress Striped Animated
50%
Progress Striped Animated
75%
Progress Striped Animated
75%
Progress Striped Animated
100%
Progress Striped Animated
100%

Vertical

.progress-vertical

With label

.progress-vertical + label
25
25
50
20
75
75
100
100

Striped

.progress-bar-striped
25
25
50
50
75
75
100
100

Striped Animated

.progress-bar-animated
25
25
50
50
75
75
100
100

General Options

Progress Bar Sizes

Class Description
.progress.progress-sm
Progress Sm
50%
.progress
Progress
50%
.progress.progress-lg
Progress Lg
50%

Progress Bars Inverse

.progress.flex-row-reverse
Progress Primary
Progress Secondary
Progress Success
Progress Info
Progress Warning
Progress Danger
Progress Light
Progress Dark
.progress.flex-row-reverse
25
25
50
50
75
75
100
100

Right Sidebar Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat ac tortor eu viverra. Etiam ipsum neque, fermentum quis sagittis nec, hendrerit id diam. Mauris a tincidunt odio. Sed porttitor ex pulvinar, tristique sapien sed, malesuada nunc.

Navbar Themes