Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.pug
Created Feb 10, 2020

Embed
What would you like to do?
Text Ring Loading Animation
- 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] || ""
- }
- }
$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)
<link href="https://fonts.googleapis.com/css?family=Dosis:400,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.

License.

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.