Bootstrap progress bar


May 04, 2021 08:00 Bootstrap


Table of contents


Bootstrap Progress Bar

This chapter explains bootstrap progress bars. In this tutorial, you'll see how bootstrap can be used to create progress bars for load, redirect, or action states.

Bootstrap progress bar Bootstrap progress bars use CSS3 transitions and animations to get the effect. Internet Explorer 9 and previous and older versions of Firefox do not support this feature, and Opera 12 does not support animation.

Tip: For more information on CSS3 transitions and animations, please refer to the "CSS3 Transitions" and "CSS3 Animations" sections!

The default progress bar

Here's how to create a basic progress bar:

  • Add a slt;div>with class .progress.

  • Next, in the above, add an empty slt;div.gt;with class .progress-bar.

  • Add a style property with a width represented by a percentage, for example, style "60%"; Indicates that the progress bar is at 60%.

Let's look at the following example:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 进度条</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" 
      aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
      <span class="sr-only">40% 完成</span>
   </div></div></body></html>

The result is as follows:

Bootstrap progress bar

Alternate progress bars

Here's how to create a progress bar with different styles:

  • Add a slt;div>with class .progress.

  • Next, in the above, add an empty slt;div>with class .progress-bar and class progress-bar-. Among them, it can be success, info, warning, danger.

  • Add a style property with a width represented by a percentage, such as style "60%"; Indicates that the progress bar is at 60%.

Let's look at the following example:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 交替的进度条</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="progress">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 90%;">
      <span class="sr-only">90% 完成(成功)</span>
   </div></div><div class="progress">
   <div class="progress-bar progress-bar-info" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 30%;">
      <span class="sr-only">30% 完成(信息)</span>
   </div></div><div class="progress">
   <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
      style="width: 20%;">
      <span class="sr-only">20% 完成(警告)</span>
   </div></div><div class="progress">
   <div class="progress-bar progress-bar-danger" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 10%;">
      <span class="sr-only">10% 完成(危险)</span>
   </div></div></body></html>

The result is as follows:

Bootstrap progress bar

The progress bar of the stripe

Here's how to create a striped progress bar:

  • Add a slt;div>with class .progress and .progress-striped.

  • Next, in the above, add an empty slt;div>with class .progress-bar and class progress-bar-. Among them, it can be success, info, warning, danger.

  • Add a style property with a width represented by a percentage, for example, style "60%"; Indicates that the progress bar is at 60%.

Let's look at the following example:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 条纹的进度条</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="progress progress-striped">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 90%;">
      <span class="sr-only">90% 完成(成功)</span>
   </div></div><div class="progress progress-striped">
   <div class="progress-bar progress-bar-info" role="progressbar"
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 30%;">
      <span class="sr-only">30% 完成(信息)</span>
   </div></div><div class="progress progress-striped">
   <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 20%;">
      <span class="sr-only">20% 完成(警告)</span>
   </div></div><div class="progress progress-striped">
   <div class="progress-bar progress-bar-danger" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 10%;">
      <span class="sr-only">10% 完成(危险)</span>
   </div></div></body></html>

The result is as follows:

Bootstrap progress bar

The progress bar for the animation

Here's how to create a progress bar for an animation:

  • Add a slt;div>with class .progress and .progress-striped. Add class .active at the same time.

  • Next, in the above, add an empty slt;div.gt;with class .progress-bar.

  • Add a style property with a width represented by a percentage, for example, style "60%"; Indicates that the progress bar is at 60%.

This will give the stripes a right-to-left feel of motion.

Let's look at the following example:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 动画的进度条</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="progress progress-striped active">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
      style="width: 40%;">
      <span class="sr-only">40% 完成</span>
   </div></div></body></html>

The result is as follows:

Bootstrap progress bar

Stacked progress bars

You can even stack multiple progress bars. Stacking multiple progress bars in the same .progress is achieved, as shown in the following example:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 堆叠的进度条</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="progress">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
      style="width: 40%;">
      <span class="sr-only">40% 完成</span>
   </div>
   <div class="progress-bar progress-bar-info" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 30%;">
      <span class="sr-only">30% 完成(信息)</span>
   </div>
   <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 20%;">
      <span class="sr-only">20% 完成(警告)</span>
   </div></div></body></html>

The result is as follows:

Bootstrap progress bar