Simple Preloader Animation using HTML and CSS

Simple Preloader Animation using HTML and CSS

Preloaders, also known as loaders, are what we see on the website screen when the web site's contents are loading. Preloaders are used by developers to keep the visitors busy and entertained while the server finishes processing the data. In this snippet, I have created a Simple Preloader Animation using only HTML and CSS. Watch the video demo to know how the loader animation will work at the end of styling.

Let's start with HTML first. I have taken a div element with a class name "loader," and it will act as the container of the loader's animating dot element. Inside the loader div element, I have four divs with no content inside of it. That's the end of the HTML markup for this snippet."



Moving on to CSS. First of all, we will give the body a black background. Now to keep the loader container center, I have used CSS display flex properties. For vertically center the content I have used align item center property. After that, I have added a justify-content center property for distributing space between and around content items of the flex container. I also gave the body tag a height of 100vh and provided overflow hidden so that the loader animation content does not overlap. Then I have provided the loader class div element a 100% width and display flex property.

You may like also:
For designing the animating dots, I have given all the divs inside the loader class a particular width and height of 30px. i gave all of them a dark orange background. Then I provided an absolute position value followed by a -20px left value. I wanted to make the dots look like water droplets. For that, I used border-radius value to all the dot boxes. After all the necessary styling for the divs, I have provided animation for the divs. The animation-name i choose is "animate." I have taken an animation duration of 2.5s, but you can increase the value if you want the animation to be even slower. I have taken ease for the animation timing function, and then I have taken infinite for the animation iteration count so that the animation keeps going. Now I don't want all the dot element animate at the same time. For that, I provided a different animation-delay value for each of the dots that are animation.

In the CSS keyframes animation, I wanted the dots to animate from the left, come in the middle, and go away to the right side. For that, I set the left value -20px for starting the animation and set a left value of 49% and 50% for the middle animation and 115% for left value for ending the animation. I have set the animation iteration count to infinite, so it will keep animating like that.

For the implementation of this snippet, we need to create two separate files of HTML and CSS, and after the creation of these files, you have to link the CSS file to your HTML file. Then copy the code below and paste the codes in the respective file and run index.html file in the browser.

HTML:




CSS:




I hope you liked it. Please feel free to leave a comment down below. I will try to answer them as soon as I can. Thanks for visiting the blog.

2 Comments

Please do not enter any spam link in the comment box.

Post a comment

Please do not enter any spam link in the comment box.

Post a Comment

Previous Post Next Post