拼图开发文档

进度条

进度条为表示进度比例的效果元素,框架定义了三种进度条效果,分别为原生的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>