Bootstrap's progress bar

前言

  前几天,github个人入口页面改版了,当然改版的小细节也很多,确实比以前体验度更好。今天我拿其中一点来讲讲,点击页面链接请求时顶端会有一条滑动的进度条,这一点做的很细心,用户体验就很好。在浏览器向服务器发送请求到服务器响应的这一小段时间,将用户的注意力吸引集中在滑动的进度条上,这样子用户就不会觉得是在干等数据请求。当然,进度条也是作为请求的小提示。说那么多,还是动手写写个小demo仿制请求进度条玩玩。

动手

  • CSS、JS引入
1
2
3
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
  • Progress Bar
1
2
3
4
5
6
7
8
9
<div class="row" style="margin-bottom: 3px;">           
<div class="progress" style="display: none;height: 3px;margin-bottom: 0px">
<div class="progress-bar progress-bar-success progress-bar-striped active" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;" >
</div>
</div>
</div>
<div class="row">
<button id="btn" class="btn btn-default">点击</button>
</div>
  • Script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type="text/javascript">
function showProgress(){
//显示进度条
$(".progress").attr("style","display: block;height: 3px;margin-bottom: 0px");
//消除父级div的margin-bottom
$(".progress").parent().removeAttr("style");
//定时器
var timeId = window.setInterval(function(){
var valuenow = parseInt($(".progress-bar").attr("aria-valuenow")) + 20;
var valuemax = parseInt($(".progress-bar").attr("aria-valuemax"));
$(".progress-bar").attr("aria-valuenow",valuenow);
var value = valuenow/valuemax*100;
$(".progress-bar").attr("style","width:" + value + "%");
if(value >= 100)
{
window.clearInterval(timeId);
window.setTimeout("hideProgress()",500);
}
},200);
}
function hideProgress(){
//隐藏进度条
$(".progress").attr("style","display: none;height: 3px;margin-bottom: 0px");
//补充父级div的margin-bottom
$(".progress").parent().attr("style","margin-bottom: 3px;");
//进度条重新赋值
$(".progress-bar").attr("aria-valuenow","0");
$(".progress-bar").attr("style","width: 0%;");
}
$("#btn").on("click",function(){
showProgress();
});
</script>

最终效果

  点击查看,对高版本IE有效

评论