Progress,進度條,用于上傳、下載等耗時并且需要顯示進度的場景,用戶可以隨時中斷該操作。
完整的進度條結構如下:
~~~
<div class="weui-progress">
<div class="weui-progress__bar">
<div class="weui-progress__inner-bar js_progress" style="width: 0%;"></div>
</div>
<a href="javascript:;" class="weui-progress__opr">
<i class="weui-icon-cancel"></i>
</a>
</div>
<br>
<div class="weui-progress">
<div class="weui-progress__bar">
<div class="weui-progress__inner-bar js_progress" style="width: 50%;"></div>
</div>
<a href="javascript:;" class="weui-progress__opr">
<i class="weui-icon-cancel"></i>
</a>
</div>
<br>
<div class="weui-progress">
<div class="weui-progress__bar">
<div class="weui-progress__inner-bar js_progress" style="width: 80%;"></div>
</div>
<a href="javascript:;" class="weui-progress__opr">
<i class="weui-icon-cancel"></i>
</a>
</div>
<div class="weui-btn-area">
<a href="javascript:;" class="weui-btn weui-btn_primary" id="btnStartProgress">上傳</a>
</div>
~~~
`div.weui-progress__inner-bar`?的默認寬度為 0, 改變改元素的寬度(百分比),即可顯示不同的進度。
點擊?`a.weui-progress__opr`?元素,可以中斷/取消正在進行的操作;如果不需要該操作,則可以省略掉該結構,進度條長度自動適應。
下面模擬改變進度條的值:
~~~
$(function(){
var progress = 0;
var $progress = $('.weui-progress__inner-bar');
function uploading(){
$progress.width(++progress % 100 + '%');
setTimeout(uploading, 20);
}
setTimeout(uploading, 20);
});
~~~
預覽效果如下:
