Bootstrap----进度条progress-bar

Bootstrap为我们提供具有漂亮样式的进度条来表示一个事务的进度，如下：

其中，

aria-valuenow="40"——进度条目前进度值。

aria-valuemax="100"——最大进度值。

aria-valuemin=“0”——最小进度值。

style="width:40%;"——让进度条指在40%的位置。

HTML代码为：

<!--进度条 progress-bar start-->
<h3>进度条 progress-bar start</h3>
<hr>
<div class="container">
     <h5>默认的进度条</h5>
     <div class="progress">
          <div class="progress-bar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;"></div>
     </div>
     <h5>交替进度条</h5>
     <div class="progress">
          <div class="progress-bar progress-bar-info" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" style="width:60%;">progress-bar-info</div>
     </div>
     <div class="progress">
          <div class="progress-bar progress-bar-success" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" style="width:60%;">progress-bar-success</div>
     </div>
     <div class="progress">
          <div class="progress-bar progress-bar-warning" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" style="width:60%;">progress-bar-warning</div>
     </div>
     <div class="progress">
          <div class="progress-bar progress-bar-danger" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" style="width:60%;">progress-bar-danger</div>
     </div>
     <h5>条纹进度条</h5>
     <div class="progress progress-striped">
          <div class="progress-bar progress-bar-info" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;"></div>
     </div>
     <h5>动画进度条</h5>
     <div class="progress progress-striped active">
          <div class="progress-bar progress-bar-warning" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" style="width:40%"></div>
     </div>
     <h5>堆叠进度条</h5>
     <div class="progress">
          <div class="progress-bar progress-bar-info" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" style="width:40%"></div>
          <div class="progress-bar progress-bar-success" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" style="width:20%"></div>
     </div>
</div>
<!--进度条 progress-bar end-->

其中说明：

1、交替进度条：在<div class="progress-bar">中加入.progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger。

2、条纹进度条：在<div class="progress-bar"> 加入.progress-striped。

3、动画进度条：在条纹进度条的基础上，在<div class="progress progress-striped">中加入.active。

4、堆叠进度条：把多个进度条放在相同的<div class="progress"> 中。

CSS代码为：

.progress {height: 20px;margin-bottom: 20px;overflow: hidden;background-color: #f5f5f5;border-radius: 4px;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);}
.progress-bar {float: left;width: 0;height: 100%;font-size: 12px;line-height: 20px;color: #fff;text-align: center;background-color: #337ab7;-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);-webkit-transition: width .6s ease;-o-transition: width .6s ease;transition: width .6s ease;}
.progress-striped .progress-bar,.progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);-webkit-background-size: 40px 40px;background-size: 40px 40px;}
.progress.active .progress-bar,.progress-bar.active {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;}
.progress-bar-success {background-color: #5cb85c;}
.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}
.progress-bar-info {background-color: #5bc0de;}
.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}
.progress-bar-warning {background-color: #f0ad4e;}
.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}
.progress-bar-danger {background-color: #d9534f;}
.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}

 

原文查看组件：http://bootstrap.css88.com/components/#progress

本地效果：desk/bootstrap/boot_index.html