Bootstrap 组件：进度条组件（progress）

作者:WangMin
格言:努力做好自己喜欢的每一件事

通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。

注意： 进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。

默认样式进度条

实现原理：需要两个容器，外容器使用类名.progress，子容器使用类名.progress-bar;其中.progress用来设置进度条容器的背景色，容器的高度，间距等；而.progress-bar设置进度方向，进度条的背景色和过度效果。

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

带有提示标签的进度条

将设置了.sr-only类的<span>标签从进度条组件中移除 类，从而让当前进度显示出来。

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

在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置min-width属性。

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

根据情境变化效果

进度条组件使用与按钮和警告框相同的类，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色，主要包括以下四种：

<div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
            <span>20% Complete</span>
        </div>
</div>
<div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
            <span>40% Complete</span>
        </div>
</div>
<div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span>60% Complete</span>
        </div>
</div>
<div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
            <span>80% Complete</span>
        </div>
</div>

条纹效果进度条

通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持。条纹进度条采用css3的线性渐变来实现，并未借助任何图片，使用条纹进度条只需在进度条的容器.progress基础上追加类名”progress-striped”,如果要进度条纹像彩色进度一样，具有彩色效果，只需在进度条上增加相应得颜色类名。

<div class="progress">
        <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
            <span>20% Complete</span>
        </div>
</div>
<div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
            <span>40% Complete</span>
        </div>
</div>
<div class="progress">
        <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span>60% Complete</span>
        </div>
</div>
<div class="progress">
        <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
            <span>80% Complete</span>
        </div>
</div>

动画效果

给.progress-bar-striped添加.active类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。

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

你需要复制以上代码实际操作才可以展现出进度条的动态效果。

堆叠效果

层叠进度可以将不容状态的进度条放在一起，按水平方式排列，也就是把多个进度条放入同一个.progress中，使它们呈现水平排列堆叠的效果。

<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
        <span>20% Complete</span>
    </div>
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
        <span>20% Complete</span>
    </div>
    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
        <span>20% Complete</span>
    </div>
    <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
        <span>20% Complete</span>
    </div>
</div>

就先分享到这里!! :smile: 后续继续更新!!