Progress

Progress indicators to display data within your application
Default Bootstrap Progress Indicators
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
.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%
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>
.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
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-primary</div>
</div>
<div class="progress">
    <div class="progress-bar bg-secondary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-secondary</div>
</div>
<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-success</div>
</div>
<div class="progress">
    <div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-info</div>
</div>
<div class="progress">
    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-warning</div>
</div>
<div class="progress">
    <div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-danger</div>
</div>
.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
<div class="progress">
    <div class="progress-bar bg-red" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-red</div>
</div>
<div class="progress">
    <div class="progress-bar bg-orange" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-orange</div>
</div>
<div class="progress">
    <div class="progress-bar bg-yellow" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-yellow</div>
</div>
<div class="progress">
    <div class="progress-bar bg-green" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-green</div>
</div>
<div class="progress">
    <div class="progress-bar bg-teal" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-teal</div>
</div>
<div class="progress">
    <div class="progress-bar bg-cyan" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-cyan</div>
</div>
<div class="progress">
    <div class="progress-bar bg-blue" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-blue</div>
</div>
<div class="progress">
    <div class="progress-bar bg-indigo" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-indigo</div>
</div>
<div class="progress">
    <div class="progress-bar bg-purple" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-purple</div>
</div>
<div class="progress">
    <div class="progress-bar bg-pink" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">.bg-pink</div>
</div>
.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:
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
.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:
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
.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.
<div class="card card-progress">
    <div class="card-header text-danger">25% Progress Card Example</div>
    <div class="card-body">This is an example of a card with a 25% completed progress bar.</div>
    <div class="progress rounded-0">
        <div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="card card-progress">
    <div class="card-header text-warning">50% Progress Card Example</div>
    <div class="card-body">This is an example of a card with a 50% completed progress bar.</div>
    <div class="progress rounded-0">
        <div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="card card-progress">
    <div class="card-header text-primary">75% Progress Card Example</div>
    <div class="card-body">This is an example of a card with a 75% completed progress bar.</div>
    <div class="progress rounded-0">
        <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="card card-progress">
    <div class="card-header text-success">100% Progress Card Example</div>
    <div class="card-body">This is an example of a card with a 100% completed progress bar.</div>
    <div class="progress rounded-0">
        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
.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