Simple Preloader Animation using HTML and CSS

byCodingFlicks -August 02, 2020

2

Preloaders, also known as loaders, are what we see on the website screen when the website'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.

Video Tutorial:

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 centering the content I have used align item center property. After that, I 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 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 elements animated at the same time. For that, I provided a different animation-delay value for each of the dots that are animated.

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 the 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 the index.html file in the browser.

HTML:

  <!DOCTYPE html>
<html lang="en">
	<!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Preloader Animation using HTML and CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
	<div class="loader">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

</body>
</html>

CSS:

  body {
	background: #000;
	display: flex;
	min-height: 100vh;
	align-items: center;
	justify-content: center; 
	background: ;
	overflow: hidden;
}
.loader {
	width: 100%;
	display: flex;
}
.loader div {
	border-radius: 0 25px 25px 25px;
	position: absolute;
	left: -20px;
	animation: animate 2.5s ease infinite;
	width: 30px;
	height: 30px;
	background: darkorange;
}
@keyframes animate {
	0% {
		left: -20px;
	}
	49% {
		left: 49%;
	}
	50% {
		left: 50%;
	}
	100% {
		left: 115%;
	}
}
.loader div:nth-child(1) {
	animation-delay: 0s;
}
.loader div:nth-child(2) {
	animation-delay: 0.3s;
}
.loader div:nth-child(3) {
	animation-delay: 0.6s;
}
.loader div:nth-child(4) {
	animation-delay: 0.9s;
}

I hope you like it. For more, please click the loaded more button on our homepage. 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.

DOWNLOAD CODE

2 Comments

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

Adam2 August 2020 at 22:04
Thanks for the code. Buddy. I was looking for it.
ReplyDelete
Replies
CodingFlicks3 August 2020 at 10:43
Thanks for visiting the blog
ReplyDelete
Replies

Add comment

Post a Comment