A quick loading spinner that spins into the next color.
A Pen by Jeremy Paris on CodePen.
<div class="x"></div> |
//-- ERROR 404: JAVASCRIPT NOT FOUND |
A quick loading spinner that spins into the next color.
A Pen by Jeremy Paris on CodePen.
@import "compass/css3"; | |
//=== VARIABLES === | |
$color1: red; | |
$color2: orange; | |
$color3: yellow; | |
$color4: green; | |
$color5: blue; | |
//=== LAYOUT === | |
body { | |
background: #666; /* === the most EVIL gray === */ | |
padding: 3em; /* 48px/16px */ | |
} | |
//=== THE X === | |
.x { | |
width: 5em; /* 48px/16px */ | |
height: 5em; /* 48px/16px */ | |
margin: 0 auto; | |
position: relative; | |
@include border-radius(50%); | |
@include animation(spin 1s cubic-bezier(0,1,1,0) infinite); | |
&:before, &:after { | |
content: ""; | |
display: block; | |
position: absolute; | |
top: 0.5em; /* 8px/16px */ | |
left: 2.25em; /* 36px/16px */ | |
width: 0.5em; /* 8px/16px */ | |
height: 75%; | |
background: teal; | |
@include border-radius(0.1875em); /*4px/16px*/ | |
@include animation(thecolorsduke 5s cubic-bezier(0,1,1,0) infinite); | |
} | |
&:before { | |
@include rotate(45deg); | |
} | |
&:after { | |
@include rotate(315deg); | |
} | |
} | |
//=== ANIMATIONS === | |
@include keyframes(spin) { | |
from { @include rotate(0deg); } | |
to { @include rotate(360deg); } | |
} | |
@include keyframes(thecolorsduke) { | |
0% { background: $color1; } | |
20% { background: $color1; } | |
40% { background: $color2; } | |
60% { background: $color3; } | |
80% { background: $color4; } | |
100% { background: $color5; } | |
} |