上一篇的个性化进度条只是利用透明图片，加上背景填充这样简单的实现，有点简单粗暴，缺点就是需要很精细的调整定位，图片较大还影响加载性能
。接下来这一篇是纯CSS实现的类似手机信号样式的进度条，较之前更加高大上、炫酷，更小
（几行css代码不到1k）.
。接下来这一篇是纯CSS实现的类似手机信号样式的进度条，较之前更加高大上、炫酷，更小
（几行css代码不到1k）.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
*{margin: 0; padding: 0; list-style: none;}
.box{width: 300px; height: 300px; margin: 200px auto;}
ul{position: relative; width: 200px; height: 200px;}
li{width: 5px; position: absolute; bottom: 0; border-radius: 10px; background: rgba(0,0,0,.5);}
ul li:nth-child(1){height: 10px; left: 0px;}
ul li:nth-child(2){height: 15px; left: 10px;}
ul li:nth-child(3){height: 20px; left: 20px;}
ul li:nth-child(4){height: 25px; left: 30px;}
ul li:nth-child(5){height: 30px; left: 40px;}
ul li:nth-child(6){height: 35px; left: 50px;}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
setInterval(function(){
var n = Math.random()*100;
console.log(n);
$('li').css('background-color','rgba(0,0,0,.5)');
if(n<16){
$('ul li:lt(1)').css('background','limegreen');
}else if(16<n&&n<32){
$('ul li:lt(2)').css('background','limegreen');
}else if(32<n&&n<48){
$('ul li:lt(3)').css('background','limegreen');
}else if(48<n&&n<64){
$('ul li:lt(4)').css('background','limegreen');
}else if(64<n&&n<80){
$('ul li:lt(5)').css('background','limegreen');
}else{
$('ul li').css('background','limegreen');
}
},1000)
</script>
</body>
</html>实现原理也是很简单的，先利用定位将6个小块放好，默认底色是黑色.5透明，再用js取个随机数判断下范围就可以实现手机信号忽上忽下的效果啦
（效果图如下，大家可以直接复制代码即可看效果了，上一篇的图片地址好像改了
）
