Bootstrap Progress Bars

Bootstrap is offering progress bar feature we will discuss about that in this article. The function of bootstrap progress bars is to show that how much the process has been done and how in progress.

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

Default Progress Bar

Following steps will help you to create a basic progress bar:

  • Make a <div> and assign a class of .progress.

  • Then within the above <div>, insert an empty <div> with .progress class.

  • To show the percentage add style attribute with the width. Like in the example style="60%", this indicates that progress has been done 60%.

Let us see an example below:

With label

Remove the .sr-only class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width to ensure the label’s text is fully visible.

Low percentages

Progress bars representing low single digit percentages, as well as 0%, include a min-width: 20px; for legibility.

Alternate Progress Bar

Following steps will help you to create a progress bar with different styles:

  • Make a <div> and assign a class of .progress.

  • Then within the above <div>, insert an empty <div> with .progress class and progress-bar-success, progress-bar-info, progress-bar-warning, progress-bar-danger.

  • To show the percentage add style attribute with the width. Like in the example style="60%", this indicates that progress has been done 60%.

Let us see an example below:

Striped Progress Bar

Following steps will help you to create a striped progress bar:

  • Make a <div> and assign a class of .progress and .progress-striped.

  • Then within the above <div>, insert an empty <div> with .progress class and progress-bar-success, progress-bar-info, progress-bar-warning, progress-bar-danger.

  • To show the percentage add style attribute with the width. Like in the example style="60%", this indicates that progress has been done 60%.

Let us see an example below:

Animated Progress Bar

Following steps will help you to create an animated progress bar:

  • Make a <div> and assign a class of .progress and .progress-striped and also add class .active with .progress-striped.

  • Then within the above <div>, insert an empty <div> with .progress class.

  • To show the percentage add style attribute with the width. Like in the example style="60%", this indicates that progress has been done 60%.

This will animate the stripes right to left.

Let us see an example below:

Stacked Progress Bar

Place the multiple progress bars into the same .progress to stack them as seen in the following example:

Leave a Reply

Your email address will not be published. Required fields are marked *