<main>
<div class="preloader">
<div class="preloader__stripe"></div>
<div class="preloader__stripe"></div>
<div class="preloader__stripe"></div>
<div class="preloader__stripe"></div>
<div class="preloader__stripe"></div>
<div class="preloader__stripe"></div>
<div class="preloader__stripe"></div>
<div class="preloader__stripe"></div>
</div>
<div class="status">
Loading<span class="status__dot">.</span><span class="status__dot">.</span><span class="status__dot">.</span>
</div>
</main>
$palette: #0d4ef2 #ffffff
*
border: 0
box-sizing: border-box
margin: 0
padding: 0
\:root
--dotDur: 1s
font-size: calc(20px + 10 * (100vw - 320px) / (1280 - 320))
body
background:
color: #d4f4fb
image: linear-gradient(#81dcf6,#d4f4fb)
repeat: no-repeat
display: flex
font: 1em/1.5 Lobster, sans-serif
height: 100vh
overflow-x: hidden
main
margin: auto
.preloader
animation: spinCCW var(--dotDur) linear infinite
margin-bottom: 1.5em
position: relative
width: 9em
height: 9em
&, &:before, &:after, &__stripe
border-radius: 50%
&:before, &:after, &__stripe
position: absolute
&:before, &:after
animation: spinCW var(--dotDur) linear infinite
content: ""
display: block
top: 0
left: 0
width: 100%
height: 100%
// ring shine
&:before
background: radial-gradient(25% 6% at 50% 7.5%,#fff 12.5%,rgba(255,255,255,0) 50%), radial-gradient(25% 6% at 50% 92.5%,#fff 12.5%,rgba(255,255,255,0) 50%), radial-gradient(100% 100% at center,rgba(0,0,0,0) 34%,rgba(0,0,0,0.3) 34%,rgba(0,0,0,0) 38% 46%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0) 50%)
z-index: 2
// drop shadow
&:after
box-shadow: 0.5em 0.5em 0.25em 0 rgba(0,0,0,0.25), 0.5em 0.5em 0.25em 1.5em rgba(0,0,0,0.25) inset
&__stripe
box-shadow: 0.25em 0.5em 0 inset
color: nth($palette,1)
top: 50%
left: 50%
width: 7.5em
height: 7.5em
transform: translate(-50%,-50%) translateX(-0.75em)
z-index: 1
@for $s from 2 through length($palette)
&:nth-of-type(#{length($palette) + n} + #{$s - 1})
color: nth($palette,$s)
@for $s from 2 through 8
&:nth-of-type(#{$s})
transform: translate(-50%,-50%) rotate(45deg * ($s - 1)) translateX(-0.75em)
.status
$textShadow: #010818
$textShadowT: 2px
color: #ffffff
text-align: center
text-shadow: (-$textShadowT) (-$textShadowT) 0 $textShadow, 0 (-$textShadowT) 0 $textShadow, $textShadowT (-$textShadowT) 0 $textShadow, $textShadowT 0 0 $textShadow, $textShadowT $textShadowT 0 $textShadow, 0 $textShadowT 0 $textShadow, (-$textShadowT) $textShadowT 0 $textShadow, (-$textShadowT) 0 0 $textShadow
&__dot
animation: appear1 var(--dotDur) steps(1,start) infinite
display: inline-block
&:nth-child(2)
animation-name: appear2
&:nth-child(3)
animation-name: appear3
// Aniamtions
@keyframes spinCW
to
transform: rotate(45deg * length($palette))
@keyframes spinCCW
to
transform: rotate(-45deg * length($palette))
@keyframes appear1
from
visibility: hidden
33%, to
visibility: visible
@keyframes appear2
from, 33%
visibility: hidden
67%, to
visibility: visible
@keyframes appear3
from, 67%
visibility: hidden
to
visibility: visible
View Compiled
This Pen doesn't use any external JavaScript resources.