进度条

进度条为表示进度比例的效果元素，框架定义了三种进度条效果，分别为原生的H5标签progress进度条、自定义的.progress进度条及圆环进度条。

H5进度条

即为HTML5的进度条标签progress效果，必填参数为value为进度值，max为最大值，进度条的长度为value/max的比例值。

    <progress value="50" max="150"></progress>

进度条尺寸

微小号进度条

小号进度条

默认进度条

大号进度条

特大号进度条

    <progress value="10" max="100" class="progress-mini"></progress>
    <div>微小号进度条</div>
    <progress value="25" max="100" class="progress-small"></progress>
    <div>小号进度条</div>
    <progress value="50" max="100"></progress>
    <div>默认进度条</div>
    <progress value="75" max="100" class="progress-big"></progress>
    <div>大号进度条</div>
    <progress value="100" max="100" class="progress-large"></progress>
    <div>特大号进度条</div>

自定义进度条

自定义进度背景.progress的元素，包含.progress-bar的进度条；进度条长度用样式style="width:50%;"设置。

50%

    <div class="progress">
      <span class="progress-bar" style="width:50%;">50%</span>
    </div>

进度条尺寸

H5进度条的尺寸样式，同样适用于自定义的进度条。

10%

微小号进度条

25%

小号进度条

50%

默认进度条

75%

大号进度条

100%

特大号进度条

    <div class="progress progress-mini">
      <span class="progress-bar" style="width:10%;">10%</span>
    </div>
    <div>微小号进度条</div>
    <div class="progress progress-small">
      <span class="progress-bar" style="width:25%;">25%</span>
    </div>
    <div>小号进度条</div>
    <div class="progress">
      <span class="progress-bar" style="width:50%;">50%</span>
    </div>
    <div>默认进度条</div>
    <div class="progress progress-big">
      <span class="progress-bar" style="width:75%;">75%</span>
    </div>
    <div>大号进度条</div>
    <div class="progress progress-large">
      <span class="progress-bar" style="width:100%;">100%</span>
    </div>
    <div>特大号进度条</div>

进度条颜色

自定义进度叠加.bg-颜色样式，可以设置背景及进度的颜色。

35%

75%

    <div class="progress bg-gray">
      <span class="progress-bar bg-danger" style="width:35%;">35%</span>
    </div>
    <div class="progress bg-main">
      <span class="progress-bar bg-dark" style="width:75%;">75%</span>
    </div>

条纹动画

自定义进度叠加.progress-striped样式，可以使进度添加条纹样式。

60%

    <div class="progress progress-striped">
      <span class="progress-bar bg-danger" style="width:60%;">60%</span>
    </div>

动画效果

在条纹的基础上叠加.progress-active样式，可以使条纹动起来。

60%

    <div class="progress progress-striped progress-active">
      <span class="progress-bar bg-success" style="width:60%;">60%</span>
    </div>