Progress bars are a metaphor used with traditional desktops as well as web development to provide visual feedback to a user on the progress of a task or action. Bootstrap provides a number of different styled progress bars.
The basic Bootstrap progress bar displays a plain blue colored progress bar. Bootstrap 4 uses the HTML 5 <progress> element, with a class name of .progress, to display progress bars. The following markup generates a basic progress bar with a maximum value of 100 and current value of 50:
<progress class="progress" value="50" max="100"></progress>
The result of the markup is shown in the following screenshot:
You can use the same button and alert style classes to generate different colored progress bars. This is accomplished by setting the progress bar's class name to one of the following:
progress progress-successprogress progress-infoprogress progress-warningprogress progress-danger
The result is illustrated in the following screenshot:
To generate progress bars with a gradient striped effect, add the.progress progress-striped class name to the <progress> element:
<progress class="progress progress-striped progress-danger" value="75" max="100"></progress>
The result is shown in the following screenshot:
To add an animated effect that will give the impression that the stripes on the progress bar are moving, simply add a.progress-animated class to its parent <progress> element:
<progress class="progress progress-striped progress-danger progress-animated" value="75" max="100"></progress>