水平线上涨loading实现原理
前期准备：需要一张水平线荡漾图片，格式为png或svg
代码实现如下：
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(e) {
var n=0,t=100,num=0
function toleft(){
if(n>-200){
$(".circle img").css({left:n--})
}else{n=0}
}
var tleft=setInterval(toleft,3)
function totop(){
if(t>0){
$(".circle img").css({top:t--})
}else{t=100}
}
var ttop=setInterval(totop,100)
function numup(){
if(num<100){
num++
}else{
num=0
}
$(".circle span").html(num+"%")
}
var tnum=setInterval(numup,100)
});
</script>
<style>
body{background-color:black;}
.circle{left:50%;margin-left:-100px;background-color:rgba(0%,80%,100%,0.5);width:200px;height:200px;border-radius:50%;overflow:hidden;position:relative;top:100px;}
.circle img{position:relative;left:0;top:100px;}
.circle span{width:80px;position:absolute;left:50%;top:120px;margin-left:-40px;color:rgba(255,255,255,0.5);font-size:50px;font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:center;}
</style>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div class="circle">
<img src="water.svg">
<span></span>
</div>
</body>
</html>
腾讯云开发者
