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