<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>加载进度条</title>
<style>
#wave {
width:180px;
height:180px;
border:6px rgba(255,108,0,0.5) solid;
border-radius:50%;
background-color:#222;
font-size:90px;
line-height:180px;
text-align:center;
color:white;
position:relative;
margin:0 auto;
overflow:hidden;
z-index:2;
}
#progress {
width:200%;
height:200%;
border-radius:43%;
background-color:rgba(255,108,0,0.5);
position:absolute;
left:-90px;
top:90px;
animation:Rota 3s linear infinite;
}
100% {
transform:rotate(360deg);
}
}</style>
</head>
<body>
<div id="wave">
<span id="num" num='0'>0</span>%
<div id="progress"></div>
</div>
<script>
var owave = document.getElementById('wave');
var onum = document.getElementById('num');
var oprogress = document.getElementById('progress');
var num = onum.getAttribute(num);
var time = setInterval(function(){
num++;
Math.min(num,100);
if(num == 100){
clearInterval(time);
}
onum.innerHTML = num;
oprogress.style.top = Math.floor((100 - num) * 1.8) + 'px';
},100);
</script>
</body>
</html>
加载进度条
最新推荐文章于 2022-06-09 15:12:03 发布