The progress of any process can be visually represented using the progress bar element.
You can use it to show the progress of any web-page loading or while completing a transaction process
Bootstrap Basic Progress Bar
A default progress bar can be created using following two contextual classes:
- .progress: Used with the container element like <div>
- .progress-bar: To be used with the child element of the container element.
The width of the progress bar can be adjusted using the CSS width property. The progress representation will be made accordingly.
Basically, the width is increased as per the process flow, representing the progress
The below code shows the creation of a basic progress bar:
1 2 3 | <div class="progress"> <div class="progress-bar" style="width:70%"></div> </div> |
Bootstrap Progress Bar Height
The default height of the progress bar is 16px.
Just like the width of the progress bar you can also use the CSS height property to change the height to
Please note, that the height for the progress container and the progress bar must be set as same.
See the code below for illustration:
1 2 3 | <div class="progress" style="height:20px"> <div class="progress-bar" style="width:40%;height:20px"></div> </div> |
Bootstrap Progress Bar Labels
For providing better readability to the user, we can show the progress percentage by adding some text content in the progress bar.
See the code below for example:
1 2 3 | <div class="progress"> <div class="progress-bar" style="width:70%">70%</div> </div> |
Bootstrap Colored Progress Bars
The default color of the progress bar is set to blue (primary).
For setting
See the code below for example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!-- Blue --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div> <!-- Green --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div> <!-- Turquoise --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div> <!-- Orange --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div> <!-- Red --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div> <!-- White --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div> <!-- Grey --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div> <!-- Light Grey --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div> <!-- Dark Grey --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div> |
Bootstrap Striped Progress Bars
You can also add stripes to the progress bars. The .progress-bar-striped
The following code is an example
1 2 | <div class="progress"> <div class="progress-bar progress-bar-striped" style="width:40%"></div> </div> |
Bootstrap Animated Progress Bar
The .progress-bar-animated class can be used to give animation to the progress bar.
The code below explains the usage for this class:
1 2 | <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div> </div> |
Bootstrap Multiple Progress Bars
Multiple progress bars can be stacked to show progress about different phases of the processes.
See the code below for the illustration
1 2 3 4 5 6 7 8 9 10 11 | <div class="progress"> <div class="progress-bar bg-success" style="width:40%"> Free Space </div> <div class="progress-bar bg-warning" style="width:10%"> Warning </div> <div class="progress-bar bg-danger" style="width:20%"> Danger </div> </div> |