前言：很久没更新，最近项目中做了个简单的Loading效果，上传供大家查阅或找灵感。
效果：其实是动态的效果，大家可以自己去尝试
代码：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div>
<button type="button" onclick="showLoadingWindow()">点击加载</butxton>
<!-- 加载弹窗 -->
<div>
<div id="loadingWindow">
<div id="circle_first"></div>
<div id="circle_second"></div>
<div id="circle_third"></div>
<p>Loading...</p>
</div>
</div>
</div>
</body>
<script>
function showLoadingWindow(){
document.getElementById("loadingWindow").style.display = "block";
}
</script>
</html>
CSS
#loadingWindow{
position: absolute;
margin:auto;
text-align: center;
width: 100px;
height: 100px;
border-radius: 20px;
background-color: rgba(0,0,0,.8);
line-height: 140px;
font-weight: 600;
font-size: 18px;
color: #fff;
display: none;
left: 48%;
top:45%;
}
#circle_first{
position: absolute;
background-color: #fff;
border-radius: 10px;
width: 10px;
height: 10px;
top: 40%;
left: 19%;
animation: loadingAnimate 1.4s infinite ease-in-out;
-webkit-animation: loadingAnimate 1.4s infinite ease-in-out; /*Opera,Safari,Chrome*/
-moz-animation: loadingAnimate 1.4s infinite ease-in-out; /**火狐**/
}
#circle_second{
position: absolute;
background-color: #fff;
border-radius: 10px;
width: 10px;
height: 10px;
top: 40%;
left: 47%;
animation: loadingAnimate 1.4s 0.16s infinite ease-in-out;
-webkit-animation: loadingAnimate 1.4s 0.16s infinite ease-in-out;
-moz-animation: loadingAnimate 1.4s 0.16s infinite ease-in-out;
}
#circle_third{
position: absolute;
background-color: #fff;
border-radius: 10px;
width: 10px;
height: 10px;
top: 40%;
left: 75%;
animation: loadingAnimate 1.4s 0.32s infinite ease-in-out;
-webkit-animation: loadingAnimate 1.4s 0.32s infinite ease-in-out;
-moz-animation: loadingAnimate 1.4s 0.32s infinite ease-in-out;
}
@keyframes loadingAnimate{
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}