.loader
.dot
.dot
.dot
.dot
.dot
View Compiled
body
margin 0
.loader
position absolute
top 50%
left 40%
margin-left 10%
transform translate3d(-50%,-50%,0)
.dot
width 24px
height 24px
background #3ac
border-radius 100%
display inline-block
animation slide 1s infinite
for n in (1..5)
.dot:nth-child({n})
animation-delay (.1s * n)
background red(#3ac, (50 * n))
@keyframes slide
0%
transform scale(1)
50%
opacity .3
transform scale(2)
100%
transform scale(1)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.