Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Design Fade balls loader Animation using CSS?
Fade balls loader animation is a popular and attractive visual effect that is used to engage website users. It is a simple animation that fading in and fading out the balls to create an eye-catching loading effect.
What is Fade balls loader Animation in CSS?
A fade ball loader animation is a type of loading animation in which a series of circles or balls fade in and fade out in a loop. It indicates that content is being loaded on a webpage. This type of animation is commonly used in web design to keep users engaged and informed while they wait for content to load.
The animation is mostly created using CSS keyframe animations and pseudo-elements to create the circles or balls. The balls are set to fade in and fade out at different intervals to create a visually interesting animation effect.
Steps to Design Fade Balls Loader Animation in CSS
To design a fade ball loader animation in CSS is a simple process; it includes creating the HTML structure and then using CSS keyframe animations and pseudo-elements to create the animation effect. Here, we will learn the following steps to design fad balls loader animation in CSS.
Step 1: Create the HTML Markup
To design a fade ball loader animation, Firstly, we need to create an HTML structure. This can be done by using a simple div container with a class name that is used to style the animation in CSS. For example -
<div class="my-loader"></div>
Step 2: Define the CSS style
In this step, we will define the CSS styles for the fade balls loader animation. This can be done by using keyframes to define the animation and then applying the animation to the div container using the animation property. For example -
.my-loader {
position: relative;
width: 40px;
height: 40px;
margin: 0 auto;
}
@keyframes fade {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
Step 3: Add the balls
To create the fade balls loader animation, we need to add the balls. This can be done by using pseudo elements. We will create the balls using the before and after pseudo elements and apply the needed styles to create the fade in and fade out effect. For example -
.fade-balls-loader:before,
.fade-balls-loader:after {
content: "";
position: absolute;
top: 0;
left: 0;
margin: auto;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: red;
}
Step 4: Fine-tune the Animation
After adding the balls, we fine-tune the animation by adjusting the timing, duration, and easing. This can be done by adjusting the animation-timing function, animation-duration, and animation-delay properties. For Example -
.fade-balls-loader:before,
.fade-balls-loader:after{
animation: fade 1.5s ease-in-out infinite;
}
.fade-balls-loader:before {
animation-delay: 0.6s;
}
Example 1
Fade Ball Loader Animation with Single Ball.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.my-loader {
position: relative;
margin:auto;
width: 40px;
height: 40px;
}
.my-loader:before,
.my-loader:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: red;
animation: fade 1.5s ease-in-out infinite;
}
.my-loader:before {
animation-delay: 0.6s;
}
@keyframes fade {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
</style>
</head>
<body>
<h3>Fade Ball Loader Animation with Single Ball</h3>
<div class="my-loader"></div>
</body>
</html>
In the above example, we have created a simple HTML markup with a single div element that has a class of my-loader. Then, we have defined the CSS styles for the container element, as well as the :before and :after pseudo-elements. After that, we use the animation property to apply the fade animation to the balls and set the delay for the first ball using the animation-delay property. Finally, we defined the fade animation using the @keyframes rule.
Example 2
Fade Ball Loader Animation with Three Balls.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.my-loader {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.ball {
width: 36px;
height: 36px;
margin: 0 4px;
border-radius: 50%;
opacity: 0;
animation: fade 1.5s ease-in-out infinite;
}
.ball-1 {
background-color: #00bfff;
animation-delay: 0.3s;
}
.ball-2 {
background-color: #ff7f50;
animation-delay: 0.6s;
}
.ball-3 {
background-color: #7fff00;
animation-delay: 0.9s;
}
@keyframes fade {
0% {
opacity: 0;
transform: scale(0.1);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
</style>
</head>
<body>
<h3>Fade Ball Loader Animation with Three Balls</h3>
<div class="my-loader">
<div class="ball ball-1"></div>
<div class="ball ball-2"></div>
<div class="ball ball-3"></div>
</div>
</body>
</html>
In the above example, we have created a simple HTML markup that includes four div elements with the classes of ball, ball-1, ball-2, and ball- 3 inside the container div. We use the display property to make the container element a flexbox and align the balls at the center. We also set the height and background-color properties to create a background for the loader animation.
Conclusion
To design a fade balls loader animation using CSS is a simple and effective way to add visual interest and engagement to the website. By given simple steps, we can create a unique and attractive loading animation that will keep the website users entertained and engaged.
222 Views
