<div class="page">
|
<div class="page__hd">
|
<h1 class="page__title">Progress</h1>
|
<p class="page__desc">进度条</p>
|
</div>
|
<div class="page__bd page__bd_spacing">
|
<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="btnUpload">上传</a>
|
</div>
|
</div>
|
<div class="page__ft">
|
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
|
</div>
|
</div>
|
<script type="text/javascript">
|
$(function(){
|
var $progress = $('.js_progress'),
|
$btnUpload = $('#btnUpload');
|
var progress = 0;
|
|
function next() {
|
if(progress > 100){
|
progress = 0;
|
$btnUpload.removeClass('weui-btn_disabled');
|
return;
|
}
|
$progress.css({width: progress + '%'});
|
progress = ++progress;
|
setTimeout(next, 20);
|
}
|
|
$btnUpload.on('click', function(){
|
if ($btnUpload.hasClass('weui-btn_disabled')) return;
|
|
$btnUpload.addClass('weui-btn_disabled');
|
next();
|
});
|
});
|
</script>
|
