进度条
<div class="page__bd page__bd_spacing">
<div class="mx-progress">
<div class="mx-progress__bar">
<div class="mx-progress__inner-bar js_progress" style="width: 0%;"></div>
</div>
<a href="javascript:;" class="mx-progress__opr">
<i class="mx-icon-cancel"></i>
</a>
</div>
<br>
<div class="mx-progress">
<div class="mx-progress__bar">
<div class="mx-progress__inner-bar js_progress" style="width: 50%;"></div>
</div>
<a href="javascript:;" class="mx-progress__opr">
<i class="mx-icon-cancel"></i>
</a>
</div>
<br>
<div class="mx-progress">
<div class="mx-progress__bar">
<div class="mx-progress__inner-bar js_progress" style="width: 80%;"></div>
</div>
<a href="javascript:;" class="mx-progress__opr">
<i class="mx-icon-cancel"></i>
</a>
</div>
<div class="mx-btn-area">
<a href="javascript:;" class="mx-btn mx-btn_primary" id="btnUpload">上传</a>
</div>
</div>
<script>
$(function(){
var $progress = $('.js_progress'),
$btnUpload = $('#btnUpload');
var progress = 0;
function next() {
if(progress > 100){
progress = 0;
$btnUpload.removeClass('mx-btn_disabled');
return;
}
$progress.css({width: progress + '%'});
progress = ++progress;
setTimeout(next, 20);
}
$btnUpload.on('click', function(){
if ($btnUpload.hasClass('mx-btn_disabled')) return;
$btnUpload.addClass('mx-btn_disabled');
next();
});
});
</script>