Loading Spinner

Single element solutions for a loading spinner are quite common. When using infinite rotation on an element that has a rounded border we usually change the color of one of the four borders, otherwise we would not see the rotation. Consider the following …

@keyframes rotation {
	to { transform: rotate(1turn); }
}
.loading {
	display: block;
	position: relative;
	padding-top: 4.25em;
	color: rgba(0,0,0,.5);
	text-align: center;
}
.loading::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	height: 4em;
	width: 4em;
	margin-left: -2em;
	border: .375em solid currentColor;
	border-right-color: rgba(0,0,0,.8);
	border-radius: 50%;
	animation: rotation .8s linear infinite;
}

In this example however I keep border-color as it is and change border-style instead.

.loading::before {
	/* no border-right-color thank you */
	border-right-style: double;
}

What we get looks like a snake being trapped inside of a ring.