#container
- (1..12).each do
.dot
View Compiled
@import bourbon
$dots: 10
$duration: 1
html
height: 100%
@include linear-gradient(#444, #222)
#container
margin: 8em auto
width: 0.45em
height: 0.95em
position: relative
@for $i from 1 through $dots
.dot:nth-of-type(#{$i})
width: 100%
height: 100%
border-radius: 3px
background: #f57df5
box-shadow: 0 0 1em 0.13em #Ae52ce
position: absolute
opacity: 1
@include transform(rotate($i * 360 / $dots + deg) translateX(2em))
@include animation(bigger $duration + s $i* $duration / $dots +s linear infinite)
@include keyframes(bigger)
from
opacity: 0
to
opacity: 1
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.