Bootstrap Progress Bars

A Progress Bar is a visual indicator that shows the completion level of a task.

For example, a Progress Bar can show:

• 25% completed
• 50% completed
• 75% completed
• 100% completed

Progress Bars are useful in websites, dashboards, learning platforms, file uploads, downloads, and project management systems.

The basic Bootstrap Progress Bar uses a .progress container and a .progress-bar child.

<div class="progress">

    <div
    class="progress-bar"
    style="width: 50%;">

    </div>

</div>

The .progress class creates the background container for the Progress Bar.

<div class="progress">

    ...

</div>

The container provides the track or background area in which the progress indicator is displayed.

The .progress-bar class creates the actual progress indicator.

<div class="progress">

    <div
    class="progress-bar"
    style="width: 70%;">

    </div>

</div>

The width of a Progress Bar determines how much progress is shown.

<div
class="progress-bar"
style="width: 25%;">

</div>

The value 25% means that the Progress Bar occupies one-quarter of its available width.

A Progress Bar can represent a small amount of completed work.

<div class="progress">

    <div
    class="progress-bar"
    style="width: 10%;">

    10%

    </div>

</div>

A 25% Progress Bar indicates that approximately one-quarter of the task has been completed.

<div class="progress">

    <div
    class="progress-bar"
    style="width: 25%;">

    25%

    </div>

</div>

A 50% Progress Bar represents half of the available progress.

<div class="progress">

    <div
    class="progress-bar"
    style="width: 50%;">

    50%

    </div>

</div>

A 75% Progress Bar indicates that most of the task has been completed.

<div class="progress">

    <div
    class="progress-bar"
    style="width: 75%;">

    75%

    </div>

</div>

A 100% Progress Bar represents a completed task.

<div class="progress">

    <div
    class="progress-bar"
    style="width: 100%;">

    100%

    </div>

</div>

You can place text inside the Progress Bar to show the percentage.

<div class="progress">

    <div
    class="progress-bar"
    style="width: 60%;">

    60%

    </div>

</div>

Displaying the percentage makes the progress value easier to understand.

Bootstrap contextual classes can be used to change the appearance of a Progress Bar.

Common classes include:

• bg-primary
• bg-success
• bg-info
• bg-warning
• bg-danger
• bg-secondary
• bg-dark

<div
class="progress-bar bg-success"
style="width: 70%;">

70%

</div>

The bg-primary class gives the Progress Bar the primary Bootstrap background color.

<div class="progress">

    <div
    class="progress-bar bg-primary"
    style="width: 60%;">

    60%

    </div>

</div>

The bg-success class can be used to represent successful or positive progress.

<div
class="progress-bar bg-success"
style="width: 80%;">

80%

</div>

The bg-warning class can be used when progress needs a warning-style visual appearance.

<div
class="progress-bar bg-warning text-dark"
style="width: 55%;">

55%

</div>

The bg-danger class gives the Progress Bar a danger context.

<div
class="progress-bar bg-danger"
style="width: 35%;">

35%

</div>

Multiple Progress Bars can be placed inside the same Progress container to represent different parts of a total.

<div class="progress">

    <div
    class="progress-bar bg-success"
    style="width: 40%;">

    40%

    </div>

    <div
    class="progress-bar bg-warning text-dark"
    style="width: 30%;">

    30%

    </div>

    <div
    class="progress-bar bg-danger"
    style="width: 20%;">

    20%

    </div>

</div>

Use .progress-bar-striped to add a striped visual effect to the Progress Bar.

<div class="progress">

    <div
    class="progress-bar
    progress-bar-striped"
    style="width: 70%;">

    70%

    </div>

</div>

The striped style can be combined with contextual background classes.

<div
class="progress-bar
progress-bar-striped
bg-success"
style="width: 80%;">

80%

</div>

Use .progress-bar-animated together with .progress-bar-striped to create an animated striped Progress Bar.

<div
class="progress-bar
progress-bar-striped
progress-bar-animated"
style="width: 75%;">

75%

</div>

The height of a Progress Bar can be customized using CSS.

<div
class="progress"
style="height: 30px;">

    <div
    class="progress-bar"
    style="width: 60%;">

    60%

    </div>

</div>

Bootstrap does not require a separate utility class for every custom Progress Bar height. Custom CSS or inline style can be used when needed.

Progress Bars are useful in learning management systems to show how much of a course a student has completed.

<div class="progress">

    <div
    class="progress-bar bg-success"
    style="width: 65%;">

    65% Complete

    </div>

</div>

A Progress Bar can visually show the progress of a file upload.

<div class="progress">

    <div
    class="progress-bar bg-info"
    style="width: 45%;">

    Uploading 45%

    </div>

</div>

In a real application, the displayed percentage should be updated according to the actual upload progress.

Project dashboards can use Progress Bars to display the completion status of different projects.

<p>
Website Development
</p>

<div class="progress">

    <div
    class="progress-bar bg-primary"
    style="width: 80%;">

    80%

    </div>

</div>

Website Development

A label can be placed above a Progress Bar to explain what the percentage represents.

<div class="mb-3">

    <div class="d-flex
    justify-content-between">

        <span>
        HTML
        </span>

        <span>
        90%
        </span>

    </div>

    <div class="progress">

        <div
        class="progress-bar
        bg-success"
        style="width: 90%;">

        </div>

    </div>

</div>

In a PHP application, the Progress Bar width can be generated from a variable.

<?php

$progress = 70;

?>

<div class="progress">

    <div
    class="progress-bar bg-success"
    style="width:
    <?php echo $progress; ?>%;">

    <?php echo $progress; ?>%

    </div>

</div>

The value of $progress can come from a database or another application process.

Progress indicators should provide useful information to users of assistive technologies as well as visual users.

Useful ARIA attributes include:

• role="progressbar"
• aria-valuenow
• aria-valuemin
• aria-valuemax

<div
class="progress-bar"
role="progressbar"
style="width: 60%;"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100">

60%

</div>

These attributes communicate the current progress value to assistive technology.

Avoid these common mistakes when creating Bootstrap Progress Bars:

• Forgetting the .progress container.
• Forgetting the .progress-bar class.
• Using a width greater than 100% for normal completion progress.
• Showing a percentage that does not match the actual width.
• Using color as the only way to communicate status.
• Using animation when it does not provide useful information.
• Failing to provide accessible progress information.
• Displaying progress that does not reflect the actual task.

A learning platform can display separate Progress Bars for different courses.

<p>
HTML
</p>

<div class="progress mb-3">

    <div
    class="progress-bar bg-success"
    style="width: 90%;">

    90%

    </div>

</div>


<p>
CSS
</p>

<div class="progress mb-3">

    <div
    class="progress-bar bg-primary"
    style="width: 75%;">

    75%

    </div>

</div>


<p>
Bootstrap
</p>

<div class="progress">

    <div
    class="progress-bar bg-info"
    style="width: 50%;">

    50%

    </div>

</div>

HTML

CSS

Bootstrap

This complete example combines labels, contextual colors, striped styles, and animated progress to create a practical dashboard.

<div class="mb-4">

    <div
    class="d-flex
    justify-content-between
    mb-1">

        <strong>
        HTML
        </strong>

        <span>
        90%
        </span>

    </div>

    <div class="progress">

        <div
        class="progress-bar
        bg-success
        progress-bar-striped"
        role="progressbar"
        style="width: 90%;"
        aria-valuenow="90"
        aria-valuemin="0"
        aria-valuemax="100">

        90%

        </div>

    </div>

</div>


<div class="mb-4">

    <div
    class="d-flex
    justify-content-between
    mb-1">

        <strong>
        CSS
        </strong>

        <span>
        75%
        </span>

    </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>


<div>

    <div
    class="d-flex
    justify-content-between
    mb-1">

        <strong>
        Bootstrap
        </strong>

        <span>
        50%
        </span>

    </div>

    <div class="progress">

        <div
        class="progress-bar
        bg-info
        progress-bar-striped
        progress-bar-animated"
        role="progressbar"
        style="width: 50%;"
        aria-valuenow="50"
        aria-valuemin="0"
        aria-valuemax="100">

        50%

        </div>

    </div>

</div>