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 and CSS.
Related Posts
To create a Gooey Balls animation using HTML and CSS, you will need to use a combination of CSS animations and the border-radius property. Here is an example of how to create a gooey ball animation using HTML and CSS:
|
| How can I create a gooey ball animation using HTML and CSS? |
Approach: The following approach will be utilized to create the rotating pass-through balls animation loader, which is described below:
Example: This example describes the rotating pass-through balls animation loader using HTML and CSS.
<!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">
CodrGeeks
</h1>
<h3 style="color:green">
Rotating pass through balls loader animation
</h3>
<div class="loader"></div>
</body>
</html>