code

Cascading Style Sheets Spinner

Robin Michael

Apr 23, 2024 • 2 min read

Writing up plain html + javascript pages and some async fetch operations take time to load. I needed a way to convey that loading action was occurring and wanted to stick with CSS approach only on this so came up with this approach

Process

Use an empty div

<div id="cover-spin"></div>

Add a background color
Set the z-index high
Make it display:none by default

#cover-spin {
	position:fixed;
	width:100%;
	left:0;right:0;top:0;bottom:0;
	background-color: rgba(255,255,255,0.7);
	z-index:9999;
	display:none;
}

Then add an ::after pseudo element that

Has a relative position
Has a border with a radius and style
Animate the element with keyframes to spin (rotate forever)

@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#cover-spin::after {
	content: '';
	display: block;
	position: relative;
	left: 40dvw;
	top: 20dvh;
	width: 20dvw;
	height: 20dvw;
	border-style: dashed;
	border-color: #a25bfc75;
	border-top-color: transparent;
	border-width: 8px;
	border-radius: 50%;
	-webkit-animation: spin .8s linear infinite;
	animation: spin 1.25s linear infinite;
}

Scraped Reviews

Full Example

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Scraped Reviews</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	#cover-spin {
		position:fixed;
		width:100%;
		left:0;right:0;top:0;bottom:0;
		background-color: rgba(255,255,255,0.7);
		z-index:9999;
		display:none;
	}

	@-webkit-keyframes spin {
		from {-webkit-transform:rotate(0deg);}
		to {-webkit-transform:rotate(360deg);}
	}

	@keyframes spin {
		from {transform:rotate(0deg);}
		to {transform:rotate(360deg);}
	}

	#cover-spin::after {
		content: '';
		display: block;
		position: relative;
		left: 40dvw;
		top: 20dvh;
		width: 20dvw;
		height: 20dvw;
		border-style: dashed;
		border-color: #a25bfc75;
		border-top-color: transparent;
		border-width: 8px;
		border-radius: 50%;
		-webkit-animation: spin .8s linear infinite;
		animation: spin 1.25s linear infinite;
	}
	</style>
</head>	
<body>
	<div id="cover-spin"></div>
	<script>
		setTimeout(() => {
			document.getElementById("cover-spin").style.display = "unset";
			setTimeout(() => {
				document.getElementById("cover-spin").style.display = "none";
			}, 3000);
		}, 200);
	</script>
</body>
</html>

Process

Full Example

Sign up for more like this.