Bootstrap进度条

前方的说话

  在网页中,进度长条之力量并无少见,比如一个评分系统,比如加载状态等,通过简单、灵活的快修,可以吧当前工作流程还是动作提供实时举报。本文将详细介绍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>

 

相关文章