利用HTML，CSS，JS实现动态加载效果_cshtml标签li动态加载-CSDN博客

本文链接：https://blog.csdn.net/NpcCat/article/details/105546242

利用HTML，CSS，JS实现动态加载效果

源码
运行效果

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet"  type="text/css" href="loadingstyle.css" />
	</head>
	<script type="text/javascript">
			
			function init(){
				var num = document.getElementById("number");
				var count = 0;
				setInterval(function(){
					if(count<100){
						number.innerText = count+"%";
						count++;
					}
					number.innerText = count+"%";
				},1000);
				
			}
	</script>
	<body onload="init()">
		<div id="frame">
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
		</div>
		<div id="number">0%</div>
	</body>
</html>

*{
	margin: 0;
	padding: 0;
}
body{
	background-color: #001e3c;
}

.circle{
	display: block;
	height: 20px;
	width: 20px;
	border-radius: 100%;
	position: absolute;
	left: 650px;
	top: 300px;
	background-color: #003e7d;
	animation: circleChange 1s ease-in-out infinite;
}
@keyframes circleChange{
	0%{
		background-color: #003e7d;
	}
	20%{
		background-color: #006dda;
	}
	50%,100%{
		background-color: #003e7d;
	}
}
#number{
	width: 100px;
	text-align: center;
	font-size: 20px;
	color: white;
	position: absolute;
	left: 610px;
	top: 354px;
}
.circle:nth-child(1){
	transform: rotate(36deg);
	transform-origin:50% 65px;
	animation-delay: 0;
}
.circle:nth-child(2){
	transform: rotate(72deg);
	transform-origin:50% 65px;
	animation-delay: 0.1s;
}
.circle:nth-child(3){
	transform: rotate(108deg);
	transform-origin:50% 65px;
	animation-delay: 0.2s;
}
.circle:nth-child(4){
	transform: rotate(144deg);
	transform-origin:50% 65px;
	animation-delay: 0.3s;
}
.circle:nth-child(5){
	transform: rotate(180deg);
	transform-origin:50% 65px;
	animation-delay: 0.4s;
}
.circle:nth-child(6){
	transform: rotate(216deg);
	transform-origin:50% 65px;
	animation-delay: 0.5s;
}
.circle:nth-child(7){
	transform: rotate(252deg);
	transform-origin:50% 65px;
	animation-delay: 0.6s;
}
.circle:nth-child(8){
	transform: rotate(288deg);
	transform-origin:50% 65px;
	animation-delay: 0.7s;
}
.circle:nth-child(9){
	transform: rotate(324deg);
	transform-origin:50% 65px;
	animation-delay: 0.8s;
}
.circle:nth-child(10){
	transform: rotate(360deg);
	transform-origin:50% 65px;
	animation-delay: 0.9;
}