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;
/* 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;
}
}​

js代码：

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