Did you know that you can create the most popular platform Google loading animation using just a few lines of HTML and CSS code?
Today in this blog you will learn how to create an engaging and interactive loading animation that is used by Google. Whether you are a beginner or an experienced developer, creating a loading animation using HTML and CSS is a skill that is definitely worth learning. Also, recently I have provided a blog on JavaScript OTP Verification Form I hope that will also help to enhance your skills.
Loading animation is a visual indicator that is used to inform the user that a process is occurring in the background, such as data being loaded or a task is completed. Loading animations are commonly used in web and mobile applications, and can be created using a variety of programming languages and tools.
Have a look at the given image of our loading animation. As you can see, it features four circles of different colors that start moving up and down in an irregular pattern upon page load.
I have included a video tutorial below that demonstrates how to create a Google loader. By following along with the tutorial, you will be able to see a demo of the loading animation and learn how to create it step by step. Either way, you will have a better understanding of how to create a loading animation using HTML and CSS after watching the tutorial.
Create Animated Google Loader in HTML & CSS
In the video tutorial, you may have noticed four colored balls moving upwards and downward in an irregular pattern with a smooth animation. This Google loading animation was created using only HTML and CSS. To create the animation, the CSS animation property was used, and to make the balls move irregularly, the CSS animation-delay property was utilized. Overall, this loading animation was created with just a few lines of code and can be easily customized to fit your needs.
I hope that, after following the tutorial, you now have the ability to create this Animated Google Loading Animation using HTML and CSS. If you are still having difficulty with the process, I have included all of the necessary HTML and CSS code below for your reference. Feel free to use this code as a starting point or as a reference while you work on creating your own loading animation.
You May Like This:
- Loading Animation in HTML & CSS
- Card Border Loading Animation HTML CSS
- Button with Loading Animation HTML CSS
Animated Google Loader in HTML & CSS [Source Code]
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Animated Google Loader in HTML & CSS by clicking on the given download button.
First, paste the following codes into your index.html file.
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google Loader in HTML & CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</body>
</html>
Second, paste the following codes into your style.css file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background: #eef5fe;
}
.wrapper {
display: flex;
column-gap: 10px;
}
.wrapper .dot {
height: 20px;
width: 20px;
border-radius: 50%;
background: #008ae6;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: animate 1s ease-in-out infinite alternate;
}
.dot:nth-child(1) {
animation-delay: -0.25s;
}
.dot:nth-child(2) {
background: #e60000;
animation-delay: -0.5s;
}
.dot:nth-child(3) {
background: #ffcc00;
animation-delay: -0.75s;
}
.dot:nth-child(4) {
background: #008800;
animation-delay: -1s;
}
@keyframes animate {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(5px);
}
}
That’s all, now you’ve successfully created a project on Animated Google Loader in HTML & CSS. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.
