The Gooey Balls loader is a basic CSS animation, where we will make a loader animation with two balls running in an animation effect that looks like the balls are rotating in motion. In this article, we will see how to create the rotating pass-through balls animation loader using HTML & CSS.
Approach: The following approach will be utilized to create the rotating pass-through balls animation loader, which is described below:
- Make the loader with a div with the class name loader.
- Style the loader with a position as relative and the pseudo-element maker will be styled with respect to it, style the height and width of the loader.
- Style the pseudo-element, we have two pseudo-loaders before and after.
- Style the pseudo-element with the position absolute, width, and height inherit from the parent’s elements, border-radius at 50%, mix-blend-mode is set to multiply to make it look like pass-through effect, add the animation of the pass-through ball loader with easing function, cubic-bezier.
- Add the background-color to both the loaders and add animation delay to one loader, of 1 second.
- Add the Keyframes animation to move the balls and decrease-increase the size using the scale function on the ball.
Example: This example describes the rotating pass-through balls animation loader using HTML & CSS.
HTML
<!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>
|
Output: