进度条
进度条为表示进度比例的效果元素,框架定义了三种进度条效果,分别为原生的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%;"
设置。
<div class="progress"> <span class="progress-bar" style="width:50%;">50%</span> </div>
进度条尺寸
H5进度条的尺寸样式,同样适用于自定义的进度条。
<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
-颜色样式,可以设置背景及进度的颜色。
<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
样式,可以使进度添加条纹样式。
<div class="progress progress-striped"> <span class="progress-bar bg-danger" style="width:60%;">60%</span> </div>
动画效果
在条纹的基础上叠加.progress-active
样式,可以使条纹动起来。
<div class="progress progress-striped progress-active"> <span class="progress-bar bg-success" style="width:60%;">60%</span> </div>