Simple SCSS Loading Spinner with step() Animation

index.haml

.loader
	- 1..12.times do
		.prong
			.inner

simple-scss-loading-spinner-with-step-animation.markdown

Simple SCSS Loading Spinner with step() Animation

Appropriately enough, literally built while waiting for my CI tests to run 😂

A Pen by Uriel Wilson on CodePen.

License.

style.scss

body {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loader {
	width: 200px;
	height: 200px;
	border-radius: 200px;
	position: relative;
	animation: rotate 0.8s steps(12, end) infinite;

	.prong {
		position: absolute;
		height: 50%;
		width: 16px;
		left: calc(50% - 8px);
		transform-origin: bottom;

		.inner {
			background: #34657f;
			border-radius: 12px;
			position: absolute;
			width: 100%;
			top: 0;
			height: 50%;
		}

		@for $i from 1 through 12 {
			&:nth-of-type(#{$i}) {
				opacity: $i * 0.08;
				transform: rotate($i * 30deg);
			}
		}
	}
}

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