Progress Bar in Bootstrap, concepts and usage


To learn how to create the Progress Bar in Bootstrap, read along with the following lesson of Taimienphi.vn. Also readers can refer to some other lessons already on Taimienphi.vn to learn more about how to create navigation bar in Bootstrap like offline.


In the previous Bootstrap lesson Taimienphi.vn showed you how to create a Badge in Bootstrap. The following lesson will be introduced to Taimienphi.vn Progress Bar (progress bar) in Bootstrap.

Progress Bar in Bootstrap

Table of Contents:
1. Create Progress Bar in Bootstrap
2. Create a progress bar with labels
3. Set height for progress bar
4. Create progress bars with stripes
5. Create dynamic progress bars
6. Update the value displayed in the progress bar
7. Create stacking progress bar
8. Create a progress bar with highlighted layers
9. Create progress bars with stripes with highlighted layers

1. Create Progress Bar in Bootstrap

Progress Bar is used to show the progress of a task or action to a user.

For example: The following example illustrates how to create a simple progress bar in Bootstrap:

progress bar in bootstrap

The output will look like the following:

progress bar in bootstrap 2

2. Create a progress bar with labels

To display the progress bar status as a percentage, we only need to use the class.sr-only to delete span in the progress bar, as in the example below:

progress bar in bootstrap 3

The output will look like the following:

progress bar in bootstrap 4

Note: If displaying the percent label, we should apply min-width to the progress bar to make sure the label section still shows even when the percentage is low, such as in the example below:

progress bar in bootstrap 5

The output will look like the following:

progress bar in bootstrap 6

3. Set height for progress bar

The default height of the progress bar is 16px, but if desired we can set any height by setting properties. CSS height on the element .progress.

For example: The following example illustrates how to set a height for the progress bar:

progress bar in bootstrap 7

The output will look like the following:

progress bar in bootstrap 8

4. Create progress bars with stripes

To create a progress bar with stripes, we just need to add layers .progress-bar-striped for the element .progress-bar.

For example: In the example below we will create a progress bar with stripes:

progress bar in bootstrap 9

The output will look like the following:

progress bar in bootstrap 10

5. Create dynamic progress bars

To create dynamic progress bars, we add layers .progress-bar-animated for the element .progress-bar, such as in the example below:

progress bar in bootstrap 11

The output will look like the following:

progress bar in bootstrap 12

6. Update the value displayed in the progress bar

The following example illustrates how to update the display value in the progress bar in Bootstrap using jQuery:

progress bar in bootstrap 13

The output will look like the following:

progress bar in bootstrap 14

7. Create stacking progress bar

We can also stack many different bars in the same progress bar, as in the example below:

progress bar in bootstrap 15

The output will look like the following:

progress bar in bootstrap 16

8. Create a progress bar with highlighted layers

Bootstrap also includes several highlighted utility classes used for progress bars to convey meaning through different colors, see the example below:

progress bar in bootstrap 17

The output will look like the following:

progress bar in bootstrap 18

9. Create progress bars with stripes with highlighted layers

Similarly, we can also create progress bars with different highlighted stripes with stripes, as in the example below:

progress bar in bootstrap 19

The output will look like the following:

progress bar in bootstrap 20

https://thuthuat.taimienphi.vn/progress-bar-rong-bootstrap-51129n.aspx
The above lesson has shown you how to create Progress Bar in Bootstrap. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article. In the next lesson, Taimienphi.vn will introduce you further Badge in Bootstrap.

.

Add a Comment

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