Progress

Progress indicators to display data within your application
Default Bootstrap Progress Indicators
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 0%', aria-valuenow='0', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
The width of the progress bar is set by inline CSS in the above examples.
Progress Labels
0%
25%
50%
75%
100%
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 0%', aria-valuenow='0', aria-valuemin='0', aria-valuemax='100')
        | 0%
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
        | 25%
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
        | 50%
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | 75%
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
        | 100%
Add text within the progress indicator to label the indicator bar.
Progress Indicator Colors
Bootstrap Defaults:
.bg-primary
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-primary
.progress
    .progress-bar.bg-secondary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-secondary
.progress
    .progress-bar.bg-success(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-success
.progress
    .progress-bar.bg-info(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-info
.progress
    .progress-bar.bg-warning(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-warning
.progress
    .progress-bar.bg-danger(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-danger
The progress bar colors rely on background color utilities to set their color styling.
Expanded Color System:
.bg-red
.bg-orange
.bg-yellow
.bg-green
.bg-teal
.bg-cyan
.bg-blue
.bg-indigo
.bg-purple
.bg-pink
.progress
    .progress-bar.bg-red(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-red
.progress
    .progress-bar.bg-orange(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-orange
.progress
    .progress-bar.bg-yellow(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-yellow
.progress
    .progress-bar.bg-green(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-green
.progress
    .progress-bar.bg-teal(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-teal
.progress
    .progress-bar.bg-cyan(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-cyan
.progress
    .progress-bar.bg-blue(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-blue
.progress
    .progress-bar.bg-indigo(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-indigo
.progress
    .progress-bar.bg-purple(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-purple
.progress
    .progress-bar.bg-pink(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | .bg-pink
You can use the expanded color system background utilities to style a progress bar non-contextually.
Striped Progress Indicators
Basic Striped Indicators:
.progress
    .progress-bar.progress-bar-striped.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.bg-info(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.bg-warning(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.bg-danger(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
Use the .progress-bar-striped class to use a striped style for your progress indicators.
Animated Striped Indicators:
.progress
    .progress-bar.progress-bar-striped.progress-bar-animated.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.progress-bar-animated.bg-info(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.progress-bar-animated.bg-warning(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.progress-bar-animated.bg-danger(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
Use the .progress-bar-animated along with the .progress-bar-striped class to animate the striped style for your progress indicators.
Progress Card
25% Progress Card Example
This is an example of a card with a 25% completed progress bar.
50% Progress Card Example
This is an example of a card with a 50% completed progress bar.
75% Progress Card Example
This is an example of a card with a 75% completed progress bar.
100% Progress Card Example
This is an example of a card with a 100% completed progress bar.
.card.card-progress
    .card-header.text-danger 25% Progress Card Example
    .card-body This is an example of a card with a 25% completed progress bar.
    .progress.rounded-0
        .progress-bar.bg-danger(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
.card.card-progress
    .card-header.text-warning 50% Progress Card Example
    .card-body This is an example of a card with a 50% completed progress bar.
    .progress.rounded-0
        .progress-bar.bg-warning(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
.card.card-progress
    .card-header.text-primary 75% Progress Card Example
    .card-body This is an example of a card with a 75% completed progress bar.
    .progress.rounded-0
        .progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
.card.card-progress
    .card-header.text-success 100% Progress Card Example
    .card-body This is an example of a card with a 100% completed progress bar.
    .progress.rounded-0
        .progress-bar.bg-success(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
You can combine background utilities and striped options to the progress cards. Make sure to append the .card-progress to the .card component to apply adjustments to the default progress bar styling.
Bootstrap Documentation Available

Progress indicators are a default component included with the Bootstrap framework. For more information on implementing, modifying, and extending the usage of progress indicators within your project, visit the official Bootstrap progress documentation page.

Visit Bootstrap Progress Docs