BootstrapBootstrap进度条

前边的话

  在网页中,进度条的听从并不少见,比如一个评分系统,比如加载状态等,通过简单、灵活的进度条,可以为当前工作流程或动作提供实时反馈。本文将详细介绍Bootstrap进度条

 

主导样式

  Bootstrap框架中对此进度条提供了一个主导样式,一个100%幅度的背景观,然后一个高亮的水彩代表完成速度。其实制作那样的进度条相当容易,一般是利用六个容器,外容器具有自然的宽度,并且安装一个背景颜色,子元素设置一个涨幅,比如完成度是30%(也就是父容器的幅度比例值),同时给其设置一个高亮的背景色

  Bootstrap框架中也是按这样的主意实现的,它提供了六个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。其中progress用来安装进度条的器皿样式,而progress-bar用于限制进度条的快慢

.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: #428bca;
  -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;
          transition: width .6s ease;
}

<div class="progress">
       <div class="progress-bar" style="width:40%"></div>
</div>

  无障碍性更好的写法如下

<div class="progress">
    <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        40% Complete
    </div>
</div>

  role属性告诉搜索引擎这些div的功力是进度条;aria-valuenow=”40″属性告知当前进度条的进度为40%;aria-valuemin=”0″属性告知进度条的最小值为0%;aria-valuemax=”100″属性告知进度条的最大值为100%

 

多彩进度条

  Bootstrap框架中的进度条和警示信息框相同,为了能给用户一个更好的体会,也依据不同的动静配置了不同的进度条颜色。在此称呼彩色进度条,其利害攸关不外乎以下四种:

  ☑ progress-bar-info:表示音讯进度条,进度条颜色为棕色

  ☑ progress-bar-success:表示成功进度条,进度条颜色为黄色

  ☑ progress-bar-warning:表示警告进度条,进度条颜色为香艳

  ☑ progress-bar-danger:表示错误进度条,进度条颜色为革命

  具体拔取相当简单,只需要在基础的速度上加码对应的类名即可,彩色进度条与要旨进度条相相比较,就是进度条颜色做了必然的变动

.progress-bar-success {
  background-color: #5cb85c;
}
.progress-bar-info {
  background-color: #5bc0de;
}
.progress-bar-warning {
  background-color: #f0ad4e;
}
.progress-bar-danger {
  background-color: #d9534f;
}

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

 

条纹进度条

  在Bootstrap框架中除了提供了花花绿绿进度条之外,还提供了一种条纹进度条,这种条纹进度条采取CSS3的线性渐变来实现,并未借助其他图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上扩大类名“progress-striped”,当然,假如要让进度条条纹像五彩进度一样,具有彩色效果,只需要在进度条上平添对应的颜料类名

  [注意]经过渐变可以为进度条创建条纹效果,IE9-浏览器不襄助

.progress-striped .progress-bar {
  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: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-size: 40px 40px;
}

.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: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-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: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-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: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-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: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);
}

<div class="progress progress-striped">
    <div class="progress-bar" style="width:70%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

 

动态条纹

  为了让条纹进度条动起来,Bootstrap框架还提供了一种动态条纹进度条。其促成原理重要通过CSS3的animation来完成。首先通过@keyframes创立了一个progress-bar-stripes的动画片,这多少个动画紧要做了一件事,就是改变背景图像的岗位,也就是background-position的值。因为条纹进度条是因而CSS3的线性渐变来制作的,而linear-gradient实现的难为对应背景中的背景图片

  [注意]IE9-浏览器不帮助

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

  在Bootstrap框架中,通过给进度条容器“progress”添加一个类名“active”,并让文档加载成功就触“progress-bar-stripes”动画生效,使其呈现出由右向左运动的卡通效果

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

<div class="progress progress-striped active">
    <div class="progress-bar" style="width:70%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

 

层叠进度条

  Bootstrap框架除了提供上述三种进度条之外,还提供了一种层叠进度条。层叠进度条可以将不同景色的进度条放置在一齐,按程度格局排列

  把四个进度条放入同一个 .progress 中,使它们展现堆叠的效果

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    35% Complete (success)
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    20% Complete (warning)
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    10% Complete (danger)
  </div>
</div>

  [注意]层叠的进度条之和无法领先100%

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 30%"></div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 40%"></div>
  <div class="progress-bar progress-bar-danger" style="width: 40%"></div>
</div>

 

指示标签

  在骨子里开支中,有过多时候是需要在进度条中一贯用相关的数值向用户传递完成的快慢值,Bootstrap考虑了这种应用意况,只需要在进度条中添加需要的值

<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>

  在突显很低的百分比时,如若急需让文本提醒可以清晰可见,能够为进度条设置 min-width 属性 

<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div>
</div>
<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
</div>
<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:1%">1%</div>
</div>
<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">1%</div>
</div>

 

相关文章