Tutorials  Articles  Notifications  Login  Signup


DG

Dhirendra Gupta

Student at BIT Mesra June 25, 2020, 6:19 p.m. ⋅ 1302 views

Making ajax loader using CSS animation


There might be some pieces of your website which take longer than usual time to load. Rather than showing nothing or a blank page, you should show some loader on your website.

This makes user understand that some background work is going on, its not that their internet connection is broken or website is broken.

Though there are serveral ways to create a loader. CSS animations are lightest way to do it.

In this artcle, We'll create 2 style of ajax loaders using CSS animation.

 

Image by PixLoger from Pixabay 

 

Round circle loader

This loader will look like a rotating wheel. HTML and CSS for this are below.

<!DOCTYPE html> 
<html> 

<head> 
	<title>Loading..</title> 
	<style> 
		h1{ 
			color:blue; 
		} 
		.hf { 
			display: block; 
			position: absolute; 
			width: 10px; 
			height: 10px; 
			left: calc(50% - 1em); 
			border-radius: 1em; 
			transform-origin: 1em 2em; 
			animation: rotate; 
			animation-iteration-count: infinite; 
			animation-duration: 1.8s; 
		} 

		/* Rotation of loader dots */ 
		@keyframes rotate { 
			from { 
				transform: rotateZ(0deg); 
			} 
			to { 
				transform: rotateZ(360deg); 
			} 
		} 
		.hf1 { 
			animation-delay: 0.1s; 
			background-color: #030bfc; 

		} 
		.hf2 { 
			animation-delay: 0.2s; 
			background-color:#787cff; 
		} 
		.hf3 { 
			animation-delay: 0.3s; 
			background-color: #9598f5; 
		} 
		.hf4 { 
			animation-delay: 0.4s; 
			background-color: #c5c7fc; 
		} 
		.hf5 { 
			animation-delay: 0.5s; 
			background-color: #dfe0f7; 
		} 
	</style> 
</head> 

<body> 
	<center> 
		<h1>Loading...</h1> 
		<div class='loader'> 
			<div class='hf hf1'></div> 
			<div class='hf hf2'></div> 
			<div class='hf hf3'></div> 
			<div class='hf hf4'></div> 
			<div class='hf hf5'></div> 
		</div> 
	</center> 
</body> 

</html> 

You can try out this code in HackersFriend Tryit Editor by copying it and pasting.

 

Horizontal moving loader

This loader will move horizontally. HTML and CSS for this will be written like this:

<!DOCTYPE html> 
<html> 

<head> 
	<title>Loading..</title> 
	<style> 
		h1{ 
			color:blue; 
		} 
		.hf{ 
			display: block; 
			position: absolute; 
			width: 100px; 
			height: 10px; 
			left: calc(58% - 5em); 
			transform-origin: 1px 10px; 
			animation: rotate; 
			animation-iteration-count: infinite; 
			animation-duration: 2.8s; 
		} 

		/* Rotation of loader dots */ 
		@keyframes rotate { 
			from { 
				transform: rotateY(50deg); 
			} 
			to { 
				transform: rotateY(360deg); 
			} 
		} 
		.hf1 { 
			animation-delay: 0.1s; 
			background-color: #030bfc; 
		} 
		.hf2 { 
			animation-delay: 0.2s; 
			background-color:#787cff; 
		} 
		.hf3 { 
			animation-delay: 0.3s; 
			background-color: #9598f5; 
		} 
		.hf4 { 
			animation-delay: 0.4s; 
			background-color: #c5c7fc; 
		} 
		.hf5 { 
			animation-delay: 0.5s; 
			background-color: #dfe0f7; 
		} 
	</style> 
</head> 

<body> 
	<center> 
		<h1>Loading...</h1> 
		<div class='loader'> 
			<div class='hf hf1'></div> 
			<div class='hf hf2'></div> 
			<div class='hf hf3'></div> 
			<div class='hf hf4'></div> 
			<div class='hf hf5'></div> 
		</div> 
	</center> 
</body> 

</html>					 

You can try out this code in HackersFriend Tryit Editor by copying it and pasting.



HackerFriend Logo

Join the community of 1 Lakh+ Developers

Create a free account and get access to tutorials, jobs, hackathons, developer events and neatly written articles.


Create a free account