普通进度条

<div class="progress progress-sm"> <div class="progress-bar" style="width:40%;"></div> </div>

尺寸

尺寸 样式
class="progress progress-sm"
默认 class="progress"
class="progress progress-big"
巨大 class="progress progress-lg"





80%
<div class="progress progress-sm"> <div class="progress-bar" style="width:40%;"></div> </div> <br> <div class="progress"> <div class="progress-bar" style="width:60%;"></div> </div> <br> <div class="progress progress-big"> <div class="progress-bar" style="width:60%;"></div> </div> <br> <div class="progress progress-lg"> <div class="progress-bar" style="width:80%;">80%</div> </div>

圆角动画

80%

100%

100%

100%

100%
<div class="progress progress-big progress-radius progress-striped"> <div class="progress-bar" style="width:80%;">80%</div> </div> <br> <div class="progress progress-big progress-red progress-radius progress-striped"> <div class="progress-bar" style="width:100%;">100%</div> </div> <br> <div class="progress progress-big progress-yellow progress-radius progress-striped"> <div class="progress-bar" style="width:100%;">100%</div> </div> <br> <div class="progress progress-big progress-green progress-radius progress-striped"> <div class="progress-bar" style="width:100%;">100%</div> </div> <br> <div class="progress progress-big progress-info progress-radius progress-striped"> <div class="progress-bar" style="width:100%;">100%</div> </div>

颜色





<div class="progress progress-sm"> <div class="progress-bar" style="width:20%;"></div> </div> <br> <div class="progress progress-sm progress-red"> <div class="progress-bar" style="width:40%;"></div> </div> <br> <div class="progress progress-sm progress-green"> <div class="progress-bar" style="width:60%;"></div> </div> <br> <div class="progress progress-sm progress-yellow"> <div class="progress-bar" style="width:80%;"></div> </div> <br> <div class="progress progress-sm progress-info"> <div class="progress-bar" style="width:80%;"></div> </div>

圆形进度条