Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.pug

Created Feb 10, 2020
What would you like to do?
Text Ring Loading Animation
- var text = "Loading...";
- var rings = 2;
- var ringSectors = 30;
- for (let r = 0; r < rings; ++r) {
- for (let s = 0; s < ringSectors; ++s) {
.preloader__sector=text[s] || ""
- }
- }
$ringRadius: 7rem
$ringSectors: 30
$animDuration: 8s
border: 0
box-sizing: border-box
margin: 0
padding: 0
font-size: calc(16px + (24 - 16)*(100vw - 320px)/ (1280 - 320))
body, .preloader
display: flex
background: #000
color: #3df1f1
font: 1em Dosis, sans-serif
height: 100vh
line-height: 1.5
perspective: 40em
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
name: spin
duration: $animDuration/2
timing-function: inherit
iteration-count: inherit
font-size: 2em
position: relative
height: 3rem
width: 1.5rem
animation-direction: reverse
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%
background: linear-gradient(transparent 45%,currentColor 45% 55%,transparent 55%)
content: ""
@for $s from 2 through $ringSectors
$angle: (360deg / $ringSectors) * ($s - 1)
transform: rotateY($angle) translateZ($ringRadius)
/* Animations */
@keyframes tiltSpin
transform: rotateY(0) rotateX(30deg)
transform: rotateY(1turn) rotateX(30deg)
@keyframes spin
transform: rotateY(0)
transform: rotateY(1turn)
<link href=",600&amp;display=swap" rel="stylesheet" />

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.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.