Spinner Clock

spinner-clock.sass

$spinTime: 60s

.spinner-clock
  position: relative: 
  width: 22px
  height: 22px
  border-radius: 50%
  border: 2px solid $color-secondary
  &:after
    content: ""
    position: absolute
    width: 10px
    height: 2px
    background: $color-secondary
    top: 8px
    left: 8px
    transform-origin: 1px 1px
    transform: rotate(-90deg)
    animation: spin-clock $spinTime linear, occult 1.5s $spinTime
    -moz-animation-fill-mode: forwards
    animation-fill-mode: forwards
  &:before
    content: ""
    position: absolute
    left: 7px
    top: 7px
    height: 4px
    width: 4px
    background: $color-secondary
    border-radius: 4px
    animation: occult 1s ($spinTime+.5s), expand .5s $spinTime linear infinite alternate
    -moz-animation-fill-mode: forwards
    animation-fill-mode: forwards

.pulse
  position: absolute
  top: -2px
  left: -2px
  width: 22px
  height: 22px
  border-radius: 50%
  border: 2px solid $color-secondary

.p1
  animation: pulse 3s ($spinTime+0.5s) infinite linear

.p2
  animation: pulse 3s ($spinTime+2.0s) infinite linear


@keyframes occult
  0%
    +opacity(1)
  100%
    +opacity(0)

@keyframes spin-clock
  from
    transform: rotate(-90deg)
  to
    transform: rotate(270deg)

@keyframes expand
  0%
    transform: scale(1)
  100%
    transform: scale(1.5)

@keyframes pulse
  0%
    transform: scale(0)
  100%
    transform: scale(1)