HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="animation27.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
CSS CODE:
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #262626;
}
.loader{
position: relative;
width: 800px;
height: 800px;
display: flex;
justify-content: center;
align-items: center;
}
.loader span{
position: absolute;
animation: ani 10s linear infinite;
}
.loader span:nth-child(1){
animation-delay: 0s;
}
.loader span:nth-child(2){
animation-delay: 1s;
}
.loader span:nth-child(3){
animation-delay: 2s;
}
.loader span:nth-child(4){
animation-delay: 3s;
}
.loader span:nth-child(5){
animation-delay: 4s;
}
.loader span:nth-child(6){
animation-delay: 5s;
}
.loader span:nth-child(7){
animation-delay: 6s;
}
.loader span:nth-child(8){
animation-delay: 7s;
}
.loader span:nth-child(9){
animation-delay: 8s;
}
.loader span:nth-child(10){
animation-delay: 9s;
}
@keyframes ani{
0%{
width: 0;
height: 0;
opacity: 1;
box-shadow: inset 0 0 20px rgba(255,255,255,.8);
transform: rotate(180deg);
}
100%{
width: 100%;
height: 100%;
opacity: 0;
box-shadow: inset 0 0 50px rgba(255,255,255,.8)
}
}
TrueCodes 
Leave a comment