本章讨论有关Bootstrap进度条的信息。进度条的目的是为了表明资产正在加载中，正在进行中，或者正在对页面上的元素进行任何操作。

进度条使用CSS3过渡和动画来实现其某些效果。这些功能在Internet Explorer 9及更低版本或Firefox的较低版本中不受支持。 Opera 12不支持动画。

默认进度条

创建一个基本的进度条-

• 添加带有.progress类的
  。
• 接下来，在上面的
  中，添加一个带有.progress-bar类的空的

  。
• 添加一个样式属性，其宽度用百分比表示。例如，style =“ 60％”;表示进度条为60％。

让我们看下面的例子-

   

      
      40% Complete
   

备用进度条

创建具有不同样式的进度条-

• 添加带有.progress类的
  。
• 接下来，在上述
  内，添加一个空的

  ，其类为.progress-bar和class progress-bar- * ，其中*可能是成功，信息，警告和危险。
• 添加一个样式属性，其宽度用百分比表示。例如，style =“ 60％”;表示进度条为60％。

让我们看下面的例子-

   

      
      90% Complete (Sucess)
   



   

      
      30% Complete (info)
   



   

      
      20%Complete (warning)
   



   

      
      10% Complete (danger)
   

条纹进度条

创建条纹进度条-

• 添加具有.progress和.progress-striped类的
  。
• 接下来，在上述
  内，添加一个空的

  ，其类为.progress-bar和class progress-bar- * ，其中*可能是成功，信息，警告和危险。
• 添加一个样式属性，其宽度用百分比表示。例如，style =“ 60％”;表示进度条为60％。

让我们看下面的例子-

   

      
      90% Complete (Sucess)
   



   

      
      30% Complete (info)
   



   

      
      20%Complete (warning)
   



   

      
      10% Complete (danger)
   

动画进度条

创建动画进度条-

• 添加具有.progress和.progress-striped类的
  。还要将.active类添加到.progress-striped中。
• 接下来，在上面的
  中，添加一个带有.progress-bar类的空的

  。
• 添加一个样式属性，其宽度用百分比表示。例如，style =“ 60％”;表示进度条为60％。

这将从右到左为条纹设置动画。

让我们看下面的例子-

   

      
      40% Complete
   

堆叠进度条

您甚至可以堆叠多个进度条。将多个进度条放入相同的.progress中以堆叠它们，如以下示例所示-

   
   

      
      40% Complete
   
   
   

      
      30% Complete (info)
   
   
   

      
      20%Complete (warning)