.jpeg)
Sourse code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wev Circle Loading Animation</title>
</head>
<style>
body{
margin: 0;
padding: 0;
display:flex;
justify-content:center;
align-items: center;
min-height:100pxvh;
background:#000;
}
.load
{
position:relative;
width:300px;
height:300px;
transform-style:preserve-3d;
transform:perspective(500px) rotateX(60deg);
}
.load span
{
position:absolute;
display:block;
border:2px solid #00FFEC;
box-sizing:border-box;
border-radius:50%;
transform: translateZ(-100px);
animation: animate 3s ease-in-out infinite;
}
@keyframes animate
{
0%,100%
{
transform: translateZ(-100px);
}
50%
{
transform: translateZ(100px);
}
}
.load span:nth-child(1)
{
top:0;
left:0;
right:0;
bottom:0;
animation-delay:1.4s;
}
.load span:nth-child(2)
{
top:10px;
left:10px;
right:10px;
bottom:10px;
animation-delay:1.3s;
}
.load span:nth-child(3)
{
top:20px;
left:20px;
right:20px;
bottom:20px;
animation-delay:1.2s;
}
.load span:nth-child(4)
{
top:30px;
left:30px;
right:30px;
bottom:30px;
animation-delay:1.1s;
}
.load span:nth-child(5)
{
top:40px;
left:40px;
right:40px;
bottom:40px;
animation-delay:1.0s;
}
.load span:nth-child(6)
{
top:50px;
left:50px;
right:50px;
bottom:50px;
animation-delay:0.9s;
}
.load span:nth-child(7)
{
top:60px;
left:60px;
right:60px;
bottom:60px;
animation-delay:0.8s;
}
.load span:nth-child(8)
{
top:70px;
left:70px;
right:70px;
bottom:70px;
animation-delay:0.7s;
}
.load span:nth-child(9)
{
top:80px;
left:80px;
right:80px;
bottom:80px;
animation-delay:0.6s;
}
.load span:nth-child(10)
{
top:90px;
left:90px;
right:90px;
bottom:90px;
animation-delay:0.5s;
}
.load span:nth-child(11)
{
top:100px;
left:100px;
right:100px;
bottom:100px;
animation-delay:0.4s;
}
.load span:nth-child(12)
{
top:110px;
left:110px;
right:110px;
bottom:110px;
animation-delay:0.3s;
}
.load span:nth-child(13)
{
top:120px;
left:120px;
right:120px;
bottom:120px;
animation-delay:0.2s;
}
.load span:nth-child(14)
{
top:130px;
left:130px;
right:130px;
bottom:130px;
animation-delay:0.1s;
}
.load span:nth-child(15)
{
top:140px;
left:140px;
right:140px;
bottom:140px;
animation-delay: 0s;
}
</style>
<body>
<div class="load">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
Also read day night button. Html table
