Dot Loading Animation – Stunning CSS

thumbnail

In this tutorial, you will read about creating dot loading animation using CSS. If your website has lots of content and takes more than a few seconds for loading time, you might want to consider adding some loading animation. A nice looking loader will keep the user engaged as well as entertaining them (well, at least for a while).

The source code you can see in the below:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loading {
	position: relative;
	width: 70px;
	height: 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.dot {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: skyblue;
	animation-name: scale;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes scale {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.6);
	}
	100% {
		transform: scale(1);
	}
}

.d1 {
	animation-delay: 0s;
}

.d2 {
	animation-delay: 0.33s;
}

.d3 {
	animation-delay: 0.66s;
}
</style>
</head>
<body>

<h2>Create Loader Animation</h2>

<div class="loader">
	<div class="dot d1"></div>
	<div class="dot d2"></div>
	<div class="dot d3"></div>
</div>

</body>
</html>

The output will be:

Back To Top