bootstrap
  1. bootstrap-progress
PreviousNext

Bootstrap Progress

Bootstrap provides the progress class to create progress bars on your website. With progress bars, you can show the status of a process or task, give feedback to the user, or indicate the completion percentage of a task.

Syntax

To create a progress bar in Bootstrap, you need to use the following syntax:

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

The width attribute sets the width of the progress bar, and the aria-valuenow, aria-valuemin, and aria-valuemax attributes specify the current, minimum, and maximum values of the progress bar. You can set these attributes to values that are relevant to your progress bar.

Example

Here is an example of how to create a progress bar in Bootstrap.

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

Backgrounds

Use background utility classes to change the appearance of individual progress bars.

<div class="progress mb-2" role="progressbar" aria-label="Success example" aria-valuenow="15" aria-valuemin="0"
aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 15%">15%</div>
</div>
<div class="progress mb-2" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100">
<div class="progress-bar bg-info" style="width: 25%">25%</div>
</div>
<div class="progress mb-2" role="progressbar" aria-label="Success example" aria-valuenow="35" aria-valuemin="0"
aria-valuemax="100">
<div class="progress-bar bg-warning" style="width: 35%">35%</div>
</div>
<div class="progress mb-2" role="progressbar" aria-label="Success example" aria-valuenow="45" aria-valuemin="0"
aria-valuemax="100">
<div class="progress-bar bg-danger" style="width: 45%">45%</div>
</div>
<div class="progress mb-2" role="progressbar" aria-label="Success example" aria-valuenow="55" aria-valuemin="0"
aria-valuemax="100">
<div class="progress-bar bg-dark" style="width: 55%">55%</div>
</div>
<div class="progress mb-2" role="progressbar" aria-label="Success example" aria-valuenow="65" aria-valuemin="0"
aria-valuemax="100">
<div class="progress-bar bg-secondary" style="width: 65%">65%</div>
</div>
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100">
<div class="progress-bar bg-white" style="width: 75%">75%</div>
</div>
Try Playground

Striped

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
</div>

<!-- Animated stripes  -->

<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>
Try Playground

Explanation

In the code above, we used progress and progress-bar classes to create the progress bar. We also used the bg-success class to set the background color of the progress bar to green. The value of the progress bar is displayed in the bar itself using the aria-valuemax attribute.

Use

You can use progress bars to display the status of a process or task, indicate how much of a task has been completed, or give feedback to the user. They are commonly used in forms, file uploads, and loading screens.

Important Points

  • Bootstrap's progress class allows you to create progress bars on your website.
  • You can use the aria-valuenow, aria-valuemin, and aria-valuemax attributes to set the current value, minimum value, and maximum value of the progress bar.
  • You can use the width CSS property to set the width of the progress bar.
  • You can use the bg-* classes to set the background color of the progress bar.

Summary

Bootstrap's progress bars are a great way to show the status of a process or task on your website. They are easy to create and customize, and can be used in various scenarios. By using progress bars, you can give feedback to your users and enhance their experience on your website.

PlaceholdersSpinners
Published on: