Loading加载动画效果

HTML代码：

<div class="Loading">
<div class="Loading-warp">
<div class="color">zt</div>
<div class="Thread"></div>
</div>
</div>​
<div class="Loading">
<div class="Loading-warp">
<div class="color">zt</div>
<div class="Thread"></div>
</div>
</div>​
<div class="Loading"><div class="Loading-warp"><div class="color">zt</div><div class="Thread"></div></div></div>​

CSS代码：

* {
padding:0;
margin:0;
list-style:none;
text-decoration:none;
}
.Loading {
width:100%;
height:100vh;
background-color:#5f5f5f;
position:fixed;
top:0;
left:0;
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
/* display:none;
*/
}
.Loading-warp .color {
width:60px;
height:60px;
background:#D55921;
border-radius:15px;
margin:auto;
margin-bottom:35px;
color:#fff;
font-size:40px;
display:flex;
justify-content:center;
align-items:center;
animation:color 1.5s infinite ease;
transform:rotate(0deg);
}
.Loading-warp .Thread {
width:150px;
height:3px;
background-color:#cfcfcf;
position:relative;
overflow:hidden;
}
.Loading-warp .Thread:hover::after {
left:75%;
}
.Loading-warp .Thread::after {
content:"";
position:absolute;
left:-25%;
top:0;
width:50%;
height:100%;
background:firebrick;
animation:Loading 1.5s infinite ease;
}
@keyframes color {
0% {
background:firebrick;
transform:rotate(-360deg);
}
50% {
background:#D55921;
transform:rotate(0deg);
}
100% {
background:firebrick;
transform:rotate(-360deg);
}
}@keyframes Loading {
0% {
left:-25%;
background:firebrick;
}
50% {
left:75%;
background:#D55921;
}
100% {
left:-25%;
background:firebrick;
}
}​
* {
padding:0;
margin:0;
list-style:none;
text-decoration:none;
}
.Loading {
width:100%;
height:100vh;
background-color:#5f5f5f;
position:fixed;
top:0;
left:0;
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
/* display:none;
*/
}
.Loading-warp .color {
width:60px;
height:60px;
background:#D55921;
border-radius:15px;
margin:auto;
margin-bottom:35px;
color:#fff;
font-size:40px;
display:flex;
justify-content:center;
align-items:center;
animation:color 1.5s infinite ease;
transform:rotate(0deg);
}
.Loading-warp .Thread {
width:150px;
height:3px;
background-color:#cfcfcf;
position:relative;
overflow:hidden;
}
.Loading-warp .Thread:hover::after {
left:75%;
}
.Loading-warp .Thread::after {
content:"";
position:absolute;
left:-25%;
top:0;
width:50%;
height:100%;
background:firebrick;
animation:Loading 1.5s infinite ease;
}
@keyframes color {
0% {
background:firebrick;
transform:rotate(-360deg);
}
50% {
background:#D55921;
transform:rotate(0deg);
}
100% {
background:firebrick;
transform:rotate(-360deg);
}
}@keyframes Loading {
0% {
left:-25%;
background:firebrick;
}
50% {
left:75%;
background:#D55921;
}
100% {
left:-25%;
background:firebrick;
}
}​
* {padding:0;margin:0;list-style:none;text-decoration:none;}.Loading {width:100%;height:100vh;background-color:#5f5f5f;position:fixed;top:0;left:0;z-index:999999;display:flex;align-items:center;justify-content:center;}.Loading-warp .color {width:60px;height:60px;background:#D55921;border-radius:15px;margin:auto;margin-bottom:35px;color:#fff;font-size:40px;display:flex;justify-content:center;align-items:center;animation:color 1.5s infinite ease;transform:rotate(0deg);}.Loading-warp .Thread {width:150px;height:3px;background-color:#cfcfcf;position:relative;overflow:hidden;}.Loading-warp .Thread:hover::after {left:75%;}.Loading-warp .Thread::after {content:"";position:absolute;left:-25%;top:0;width:50%;height:100%;background:firebrick;animation:Loading 1.5s infinite ease;}@keyframes color {0% {background:firebrick;transform:rotate(-360deg);}50% {background:#D55921;transform:rotate(0deg);}100% {background:firebrick;transform:rotate(-360deg);}}@keyframes Loading {0% {left:-25%;background:firebrick;}50% {left:75%;background:#D55921;}100% {left:-25%;background:firebrick;}}​

js代码：

$(.Loading).delay(5000).fadeOut(slow);​
$(.Loading).delay(5000).fadeOut(slow);​
$(.Loading).delay(5000).fadeOut(slow);​