<div class="loader">
	<p class="loader__text">Loading...</p>
	<div class="loader__spinner"></div>
</div>
.loader {
	font-family: arial, san-serif;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
}
.loader__text {
	position: absolute;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
}
.loader__spinner {
	border: 0.5rem solid #f3f3f3;
	border-right: 0.5rem solid #666;
	border-radius: 50%;
	width: 10rem;
	height: 10rem;
	animation: spin 2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .loader__spinner {
    animation: none;
  }
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.