Simplest CSS spinner

<div class="loader">
	<div class="spinner"></div>
</div>
.loader {
	display: flex;
	height: 20vh;
	justify-content: center;
	align-items: center;
}

.spinner {
	height: 5vh;
	width: 5vh;
	border: 6px solid rgba(0, 174, 239, 0.2);
	border-top-color: rgba(0, 174, 239, 0.8);
	border-radius: 100%;
	animation: rotation 0.6s infinite linear 0.25s;

	/* the opacity is used to lazyload the spinner, see animation delay */
	/* this avoid the spinner to be displayed when visible for a very short period of time */
	opacity: 0;
}

@keyframes rotation {
	from {
		opacity: 1;
		transform: rotate(0deg);
	}
	to {
		opacity: 1;
		transform: rotate(359deg);
	}
}


Related Snippets