This blog’s focus is on How to Animate a Google Loader Using HTML & CSS. Whether you are a beginner, or an experienced developer, the skill of creating a loading animation using HTML and CSS is definitely worth your time.
A loading animation is a loading screen that is designed to show progress when a user performs a request to the system. Loading animations are largely used on web or mobile applications, and there are many techniques or programs that you can use to develop them.
Look at the given picture of our loading animation. You can observe that there are four circles with different colors that commence moving up and down in an irregular fashion as soon as the page loads .
I hope that after watching the tutorial, you can now create the Animated Google Loading Animation using HTML and CSS. However, if you are still struggling, don’t fret! I have provided all the necessary HTML and CSS code in this article for your assistance. You can modify this code to make your own loading animation, or use it as a reference while enhancing the animation.
What You’ll Learn:
- How to structure the Animate a Google Loader with HTML
- How to style the Animate a Google Loader using CSS
Step 1: Structure the Animate Loader with HTML
Start by creating a new file called (index.html). Then, copy and paste the HTML code provided into this file. Remember to save it with the (.html) extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Google Loader Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="loader">
<div class="dot red"></div>
<div class="dot blue"></div>
<div class="dot yellow"></div>
<div class="dot green"></div>
</div>
</body>
</html>
Step 2: Styling the Google Loader with CSS
Create a new file called (style.css) and copy the provided code into this file. Don’t forget to save it with the (.css) extension.
console.log( 'Code is Poetrybody {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.loader {
display: flex;
justify-content: space-between;
width: 80px; /* Adjust width as needed */
}
.dot {
width: 15px; /* Size of the dots */
height: 15px; /* Size of the dots */
border-radius: 50%;
animation: bounce 0.6s infinite alternate;
}
.red {
background-color: #FF3D00; /* Red color */
}
.blue {
background-color: #4285F4; /* Blue color */
}
.yellow {
background-color: #FFC107; /* Yellow color */
}
.green {
background-color: #34A853; /* Green color */
}
.dot:nth-child(1) {
animation-delay: 0s; /* No delay for the first dot */
}
.dot:nth-child(2) {
animation-delay: 0.15s; /* Delay for the second dot */
}
.dot:nth-child(3) {
animation-delay: 0.3s; /* Delay for the third dot */
}
.dot:nth-child(4) {
animation-delay: 0.45s; /* Delay for the fourth dot */
}
@keyframes bounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-20px); /* Height of the bounce */
}
}
Final Conclusion
Once again, you have successfully completed a project based on Animated Google Loader using HTML and CSS – Congratulations! Please feel free to use the source zip file provided above if your code is not functioning as expected, or if you need some other form of assistance. The download is free, and the zip file consists of the project folder which contains the required source code files.
Happy Coding!