效果:
完整代码:
<!DOCTYPE html>
<html>
<head>
<title>进度条</title>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
.progress-bar{
background: #ddd;
box-shadow: 0 0 0;
height: 5px;
margin: 10px 0;
position: relative;
width: 100%;
border-radius: 8px;
}
.progress-bar-text{
color: #333;
font-size: 15px;
}
.progress-bar>span{
display: block;
height: 100%;
width: 0px;
border-radius: 8px;
}
.progress-bar>span{
background: #F8c018;
/*渐变效果*/
background-image: linear-gradient(to right,red,yellow,blue) ;
}
.progress-bar-linear{
margin-top: 50px;
}
hr{
border: 1px dashed #b3aaaa;
}
</style>
</head>
<body>
<div class="progress-bar-head">
<h2>地区点击率</h2>
<hr>
<p>关注度如下:</p>
</div>
<div class="progress-bar-box">
<div class="progress-bar-linear">
<p class="progress-bar-text">曼谷
<span class="float-right">进度条的值</span>
</p>
<div class="progress-bar">
<span data-percent="85"></span>
</div>
</div>
<div class="progress-bar-linear">
<p class="progress-bar-text">西雅图
<span class="float-right">进度条的值</span>
</p>
<div class="progress-bar">
<span data-percent="98"></span>
</div>
</div>
<div class="progress-bar-linear">
<p class="progress-bar-text">北京
<span class="float-right">进度条的值</span>
</p>
<div class="progress-bar">
<span data-percent="95"></span>
</div>
</div>
<div class="progress-bar-linear">
<p class="progress-bar-text">西藏
<span class="float-right">进度条的值</span>
</p>
<div class="progress-bar">
<span data-percent="80"></span>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".progress-bar > span").each(function(){//获取到加载进度条的位置
var width = 0;
var self = this;//改变this指向,setInterval内部this指向的是它内部的上下文
var timer = setInterval(function(){//设置定时器
width++;
$(self).css('width',function(){
$(self).parent().prev().children("span").html(width+'%');//获取到显示进度的位置并赋值
if(width >= parseInt($(self).data("percent"))){//data-percent是自定义属性,如果当前宽度达到了要求,则清除定时器
clearInterval(timer);
}
return width+'%';//返回当前的宽度,并赋值给'width'样式,以达到实时更新的效果
})
},20);
});
});
</script>
</body>
</html>