<!DOCTYPE html>
<html>
<head>
<model>
physique {
show: grid;
place-items: heart;
}
.loader {
width: 70px;
peak: 70px;
place: relative;
z-index: 999;
}
.loader::earlier than, .loader::after {
content material: '';
place: absolute;
width: inherit;
peak: inherit;
border-radius: 50%;
mix-blend-mode: multiply;
animation:
rotate92523 2s infinite cubic-bezier(0.77, 0, 0.175, 1);
}
.loader::earlier than {
background-color: #5F8D4E;
}
.loader::after {
background-color: #6D9886;
animation-delay: 1s;
}
@keyframes rotate92523 {
0%,
100% {
left: 35px;
}
25% {
remodel: scale(.3);
}
50% {
left: 0%;
}
75% {
remodel: scale(1);
}
}
</model>
</head>
<physique>
<h1 model="colour:inexperienced">
GeeksforGeeks
</h1>
<h3 model="colour:inexperienced">
Rotating move via balls loader animation
</h3>
<div class="loader"></div>
</physique>
</html>
