Text Ring Loading Animation

index.pug

- var text = "Loading...";
- var rings = 2;
- var ringSectors = 30;

.preloader
	- for (let r = 0; r < rings; ++r) {
		.preloader__ring
			- for (let s = 0; s < ringSectors; ++s) {
				.preloader__sector=text[s] || ""
			- }
	- }

style.sass

$ringRadius: 7rem
$ringSectors: 30
$animDuration: 8s

*
	border: 0
	box-sizing: border-box
	margin: 0
	padding: 0

\:root
	font-size: calc(16px + (24 - 16)*(100vw - 320px)/ (1280 - 320))

body, .preloader
	display: flex

body
	background: #000
	color: #3df1f1
	font: 1em Dosis, sans-serif
	height: 100vh
	line-height: 1.5
	perspective: 40em

.preloader
	animation: tiltSpin $animDuration linear infinite
	flex-direction: column
	justify-content: center
	align-items: center
	margin: auto
	width: 17em
	height: 17em
	&, &__ring
		transform-style: preserve-3d
	&__ring
		animation:
			name: spin
			duration: $animDuration/2
			timing-function: inherit
			iteration-count: inherit
		font-size: 2em
		position: relative
		height: 3rem
		width: 1.5rem
		&:nth-child(even)
			animation-direction: reverse
	&__sector
		font-weight: 600
		position: absolute
		top: 0
		left: 0
		text-align: center
		text-transform: uppercase
		transform: translateZ($ringRadius)
		&, &:empty:before
			display: inline-block
			width: 100%
			height: 100%
		&:empty:before
			background: linear-gradient(transparent 45%,currentColor 45% 55%,transparent 55%)
			content: ""
		@for $s from 2 through $ringSectors
			&:nth-child(#{$s})
				$angle: (360deg / $ringSectors) * ($s - 1)
				transform: rotateY($angle) translateZ($ringRadius)

/* Animations */
@keyframes tiltSpin
	from
		transform: rotateY(0) rotateX(30deg)
	to
		transform: rotateY(1turn) rotateX(30deg)

@keyframes spin
	from
		transform: rotateY(0)
	to
		transform: rotateY(1turn)

styles

<link href="https://fonts.googleapis.com/css?family=Dosis:400,600&amp;display=swap" rel="stylesheet" />

text-ring-loading-animation.markdown

Text Ring Loading Animation

A loading animation where the text “Loading…” is written around the edge of two spinning CSS 3D rings

A Pen by Jon Kantner on CodePen.

License.