DG

dhirendra_gupta

Student at BIT Mesra June 25, 2020, 6:19 p.m. ⋅ 312 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.



Go back to feed

HackersFriend Updates





View more


Events


Nov. 28, 2018, 5:30 p.m.

Python from zero to hero

place Delhi

View details


Aug. 13, 2018, 5:30 p.m.

Python from zero to hero

place Bangalore ( HackersFriend office BTM Layout)

View details