Dot Loading Animation – Stunning CSS


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>
<meta name="viewport" content="width=device-width, initial-scale=1">
.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;

<h2>Create Loader Animation</h2>

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


The output will be:

Back To Top