<!DOCTYPE html>
<html>
<head>
<style>
body {
display: grid;
place-items: center;
}
.loader {
width: 70px;
height: 70px;
position: relative;
z-index: 999;
}
.loader::before, .loader::after {
content: '';
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
mix-blend-mode: multiply;
animation:
rotate92523 2s infinite cubic-bezier(0.77, 0, 0.175, 1);
}
.loader::before {
background-color: #5F8D4E;
}
.loader::after {
background-color: #6D9886;
animation-delay: 1s;
}
@keyframes rotate92523 {
0%,
100% {
left: 35px;
}
25% {
transform: scale(.3);
}
50% {
left: 0%;
}
75% {
transform: scale(1);
}
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3 style="color:green">
Rotating pass through balls loader animation
</h3>
<div class="loader"></div>
</body>
</html>