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>

 

相关文章