Hace años era muy típico usar imágenes (gifs) en las pre-cargas de las webs, etc.. para crear ese efecto de «cargando…»

A continuación un ejemplo para realizar un efecto loading circular usando solo CSS. En este caso a un solo elemento con clase «loader-circular».

.loader-circular {
	position: relative;
	height: 60px;
	width: 60px;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #eee;

	-webkit-animation: animacion .6s linear 0s infinite;
	-moz-animation: animacion .6s linear 0s infinite;
	animation: animacion .6s linear 0s infinite;
}
.loader-circular:before,
.loader-circular:after {
	content: '';
	display: block;
	position: absolute;
}
.loader-circular:before {
	border-radius: 0 30px 30px 0;
	height: 60px;
	width: 50%;
	top: 0;
	right: 0;

	background-image: -webkit-linear-gradient(#eee, #aaa);
	background-image: -moz-linear-gradient(#eee, #aaa);
	background-image: linear-gradient(#eee, #aaa);
}
.loader-circular:after {
	border-radius: 50%;
	height: 50px;
	width: 50px;
	top: 50%;
	left: 50%;
	background-color: #fff;

	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
}

@-webkit-keyframes animacion {
	to { -webkit-transform: rotate(360deg);	}
}
@-moz-keyframes animacion {
	to { -moz-transform: rotate(360deg); }
}
@keyframes animacion {
	to { transform: rotate(360deg);	}
}

Resultado:

Este es solo un ejemplo para mostrar lo fácil que es crearlo solo CSS… puedes editar este código a tu gusto (para modificar su posición, tamaño, colores, velocidad, etc)

Agradezco tu comentario 🤘