實現loading的代碼

時間 2019-11-19

標籤實現 loading 代碼简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Loading</title>
		
		<style>
			.loader {
				position:relative;
			}
			.loader span{
				position:absolute;
				top:200px;
				width:30px;height:10px;
				border-bottom-left-radius:3px;
				background:green;
				transform-origin:40px 0;
				-webkit-transform-origin:50px 5px;
				-webkit-animation:circle-line 1s infinite;
				animation:circle-line 1s infinite;
			}
			
			@keyframes circle-line{
				0%{
					OPACITY:0.1;
				}
				100%{
					opacity:0.7;
				}
			}
		</style>
	</head>

	<body>
		<div class="loading">
			<div class="loader circle-line" id="loader">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			
		</div>
   <script type="text/javascript">
   
   var spanli = document.getElementById("loader").getElementsByTagName("span");
   for(i=0;i<spanli.length;i++){
	spanli[i].style.webkitTransform="rotate("+45*(i-1)+"deg)";
	spanli[i].style.webkitAnimationDelay= 0.13*i +"s";
   }
   
   </script>
		
	</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。