进度条

普通进度条

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

尺寸

　　添加以下样式：

ui-progress-sm
ui-progress-big
ui-progress-lg

80%

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

<div class="ui-progress">
   <div class="ui-progress-bar" style="width:60%;"></div>
</div>

<div class="ui-progress ui-progress-big">
   <div class="ui-progress-bar" style="width:70%;"></div>
</div>

<div class="ui-progress ui-progress-lg">
   <div class="ui-progress-bar" style="width:80%;"></div>
</div>

圆角动画

40%

50%

60%

80%

100%

<div class="ui-progress ui-progress-big ui-progress-radius ui-progress-striped">

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

</div>


<div class="ui-progress ui-progress-big ui-progress-red ui-progress-radius ui-progress-striped">

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

</div>


<div class="ui-progress ui-progress-big ui-progress-yellow ui-progress-radius ui-progress-striped">

   <div class="ui-progress-bar" style="width:60%;">60%</div>

</div>


<div class="ui-progress ui-progress-big ui-progress-green ui-progress-radius ui-progress-striped">

   <div class="ui-progress-bar" style="width:80%;">80%</div>

</div>


<div class="ui-progress ui-progress-big ui-progress-info ui-progress-radius ui-progress-striped">

   <div class="ui-progress-bar" style="width:100%;">100%</div>

</div

颜色

　　添加以下样式：

ui-progress-red
ui-progress-green
ui-progress-yellow
ui-progress-info

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


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


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


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