The personalized progress bar in the previous article only uses transparent pictures and a simple implementation such as background filling, which is a bit simple and rude. The disadvantage is that it requires very fine positioning adjustment, and the larger picture also affects the loading performance
. The next article is a progress bar similar to mobile phone signal style implemented by pure CSS, which is taller, cooler, and smaller than before
(a few lines of CSS code is less than 1k).
. The next article is a progress bar similar to mobile phone signal style implemented by pure CSS, which is taller, cooler, and smaller than before
(a few lines of CSS code is less than 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>The implementation principle is also very simple. First use positioning to place 6 small blocks, the default background color is black. 5 is transparent, and then use js to take a random number to determine the range to achieve the effect of mobile phone signal up and down 
( The effect picture is as follows, you can copy the code directly to see the effect, the picture address in the previous article seems to be changed 
)
