h1 Pure css loader #4
h2 Inspired by Mike Mirandi (via
a(href="https://dribbble.com/shots/2120614-Load-Screen-Bars", target="blank") dribble
|)
div.loader
-for (var x = 1; x < 26; x++)
div(class="item item-" + x)
div.lighter
div.darker
View Compiled
$background-color: hsl(0, 0, 15)
body
background: $background-color
font-family: sans-serif
perspective: 600px
h1, h2
position: absolute
left: 50%
transform: translateX(-50%)
color: hsl(0, 0, 100)
text-transform: uppercase
letter-spacing: 2px
h1
top: 24px
font-size: 12px
h2
top: 44px
font-size: 10px
opacity: 0.7
a
color: hsl(0, 0, 100)
text-decoration: none
border-bottom: 1px dotted lighten($background-color, 50%)
// Loader vars
$loader-time: 1.4s
$item-size: 24px
$item-max-size: 80px
$item-color: hsl(120, 60, 50)
$item-delay: 0s
div.loader
position: absolute
width: $item-size *5
height: $item-size *5
top: 150px
left: 50%
padding: 3%
background: darken($background-color, 3%)
transform-style: preserve-3d
transform: translateX(-50%) rotateX(85deg) rotate(-45deg)
div.item
float: left
position: relative
width: $item-size
height: $item-size
background: $item-color
transform-style: preserve-3d
div.lighter,
div.darker
position: absolute
top: 0
width: $item-size
height: $item-size /2
div.lighter
background: lighten($item-color, 10%)
transform-origin: 50% 0%
transform: translateY($item-size) rotateX(-90deg)
div.darker
background: darken($item-color, 10%)
transform-origin: 0% 0%
transform: rotate(90deg) rotateX(-90deg)
@for $i from 1 through 50
$random-item: random(25)
$item-delay: $item-delay + 0.1
div.item-#{$random-item}
animation: anim-move $loader-time ease-in-out infinite $item-delay
div.lighter,
div.darker
animation: anim-height $loader-time ease-in-out infinite $item-delay
@keyframes anim-move
0%, 100%
transform: translateZ(0)
40%, 60%
transform: translateZ($item-max-size)
@keyframes anim-height
0%, 100%
height: $item-size /2
40%, 60%
height: $item-max-size
View Compiled
This Pen doesn't use any external JavaScript resources.