.centerdot
- for(i=0; i < 4; i++)
.ring(class="r#{i}")
.dot
.dot
.dot
.dot
.dot
.dot
.dot
.dot
xxxxxxxxxx
vendor(prop, args)
prop} args {
prop} args {
prop} args {
{prop} args
$blu= #253659
$grey= #dedcd4
$dot-size= 50px
$ringsize = 220px
body, html
position: relative
width: 100%
height: 100%
overflow: hidden
body
background: $blu
.centerdot
position: absolute
width: 20px
height: 20px
background: $grey
left: 50%
top: 50%
margin-top: -10px
margin-left: -10px
border-radius: 50%
.ring
position: absolute
left: 50%
top: 50%
margin-top: ($ringsize / -2)
margin-left: ($ringsize / -2)
border-radius: 50%
width: $ringsize
height: $ringsize
vendor(animation-iteration-count, infinite)
vendor(animation-timing-function, linear)
for count in (0..7)
.dot:nth-child({count + 1})
$dotval = ($ringsize / 2)
top: sin(45deg * count) * $dotval + $dotval
left: cos(45deg * count) * $dotval + $dotval
margin-left: ($dot-size / -2)
margin-top: ($dot-size / -2)
$amnt = (45deg * count + 90deg)
vendor(transform, rotate($amnt))
&.r0
vendor(transform, scale(0.5))
vendor(animation-duration, 5s)
vendor(animation-name, rotate-cw0)
&.r2
vendor(animation-duration, 5s)
vendor(transform, scale(2))
vendor(animation-name, rotate-cw2)
&.r3
vendor(transform, scale(3))
for ringcount in (0..4)
.r{ringcount} .dot:after
$delay = ringcount * -150ms
vendor(animation-delay, $delay)
.dot
position: absolute
width: $dot-size
height: $dot-size
background: $grey
border-radius: ($dot-size / 2)
z-index: 1
&:after
content: ""
display: block
width: $dot-size
height: $dot-size
border-radius: ($dot-size / 2)
position: absolute
background-color: $blu
top: 0
z-index: 2
vendor(animation-duration, 2.5s)
vendor(animation-iteration-count, infinite)
vendor(animation-timing-function, ease-out)
&:after
vendor(animation-name, move)
@keyframes move
0%
left: -60%
50%
left: 60%
100%
left: -60%
@keyframes rotate-cw2
0%
vendor(transform, rotate(0deg) scale(1.8))
100%
vendor(transform, rotate(360deg) scale(1.8))
@keyframes rotate-cw0
0%
vendor(transform, rotate(0deg) scale(0.5))
100%
vendor(transform, rotate(360deg) scale(0.5))
# Nothin here!