Introduction of Div Loading Animation Css
Today we are going to make a Load animation effect css by following the simple code of HTML and CSS. In this project, there will be a loader that will continuously move up and down until the thing you are loading is not loaded successfully. This is very useful; you can use it on your website to let people wait until something is loaded completely. You can see this type of loader on many websites.
Now let’s start making this Div Loading Animation Css with the help of HTML and CSS. By following their simple code step by step to understand it without any doubt. If you have any doubt, then you can ask from us by sending the mail ID given below, WhatsApp us, or DM in Instagram.
Step 1: Html Code For Load animation effect CSS
First, we will create the structure of this Div Loading Animation Css with the help of HTML. In this, we will first make the parent div in which our loader will be located. Then we will make three divs for the loader in which there will be nothing written in the div. That will be simple, and only an ID will be given to all three loader’s divs for styling in CSS. At the end, we will also make a span in which we will write loading… when the file will be loading.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Loader</title> </head> <body> <div class="loader"> <div id="loader1"></div> <div id="loader2"></div> <div id="loader3"></div> </div> <span>Loading...</span> </body> </html>
Step 2: CSS Code For Load animation effect CSS
After making the structure of the Div Loading Animation Css, we will now design it by giving style using CSS (an external stylesheet attached to the HTML file used to give styling to the HTML webpage). In this, we will first set the background color of the HTML page with the use of the background color property in CSS. And then we will move toward the loader.
In the Div Loading Animation Css, we will first assess the size and position of the parent div and then also the child. Now we will design the child, in which we will give the parent’s flex property so that their child div will come to one horizontal line, and then we will give height and width to the child divs and will keep the size of all divs the same and different colors for all divs, as well as the border property to set the radius of divs.
<style> *{ margin: 0px; padding: 0px; } body{ background-color: rgb(34, 31, 31); } .loader{ display: flex; justify-content: center; align-items: center; margin-top: 20%; gap: 10px; margin-bottom: 20px; } #loader1{ width: 15px; height: 20px; background-color: red; border-radius: 6px; animation: loading1 1s 0s infinite ease-in; } #loader2{ width: 15px; height: 20px; background-color: rgb(91, 248, 0); border-radius: 6px; animation: loading2 1s 0.3s infinite ease-in; } #loader3{ width: 15px; height: 20px; background-color: rgb(0, 208, 255); border-radius: 6px; animation: loading3 1s 0.5s infinite ease-in; } @keyframes loading1{ 0%{ transform: scaleY(1); transition: 0.5s; } 50%{ transform: scaleY(2.3); transition: 0.5s; background-color: rgb(3, 175, 255); } 100%{ transform: scaleY(1); transition: 0.5s; } } @keyframes loading2{ 0%{ transform: scaleY(1); transition: 0.5s; background-color: red; } 50%{ transform: scaleY(2.3); transition: 0.5s; } 100%{ transform: scaleY(1); transition: 0.5s; } } @keyframes loading3{ 0%{ transform: scaleY(1); transition: 0.5s; background-color: rgb(255, 0, 0); } 50%{ transform: scaleY(2.3); transition: 0.5s; } 100%{ transform: scaleY(1); transition: 0.5s; background-color: rgb(3, 175, 255); } } span{ color: white; font-size: 20px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; margin-left: 47%; } </style>
Step 3: Animation Code For Load animation effect CSS
After making the whole structure of loader now will add some animation. With the help of @keyframe( this is a framework of css use to give animation to the html page elements) to make it workable and to behave like real loader with animation. In this, we will basically give the scale property to the child divs. Increase the scale in the y-axis direction, in which all animation timing will be different for all three divs. And at the end, we will give the animation name and other properties in the CSS of those divs.
Output of Div Loading Animation Css
Finally, we made the Load animation effect css with the help of doing simple code step by step to understand it fully without any problems. You can also make such projects to increase your practice, or you can make them to implement on your webpage. If you want the source code, then click on the button given below to download the code.

For more explanation, click on the link given below to watch the video.
You can also check
991 B