Skip to content

Instantly share code, notes, and snippets.

@dbasilioesp
Created December 12, 2014 12:06
Show Gist options
  • Save dbasilioesp/daa286bf8d734afda8d0 to your computer and use it in GitHub Desktop.
Save dbasilioesp/daa286bf8d734afda8d0 to your computer and use it in GitHub Desktop.
Spinner Clock
$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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment