WeUI进度条
WeUI基本组件进度条简单概述：
WeUI中ProgressBar(进度条)的应用场景很多：
列如：1.在用户登录时，等待服务器返回消息，这时会用到进度条。
2.在进行一些大的文件或者一些手机应用时，需要等待一些时间，这时会添加进度条让用户知道当前程序的进度，可以带来很大便利。
下面大家看一下效果图：
这是一个比较简陋的进度条，建议在实例开发中可以对其进行美化，以达到所需的效果。
进度条组件实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>WeUI基础结构</title>
<link rel="stylesheet" href="css/weui.css" />
</head>
<body>
<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 src="js/zepto.min.js"></script>
<script src="js/weui.js" type="text/javascript" charset="utf-8"></script>
<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>
</body>
</html>