SCSS
@import "compass/css3";
$spinner-size: 400px;
$spinner-thickness: 6px;
$spinner-speed: 1.2s;
$spinner-3d: true;
$spinner-loops: infinite;
.spinner {
position: relative;
margin: auto;
box-sizing: border-box;
background-clip: padding-box;
width: $spinner-size;
height: $spinner-size;
border-radius: $spinner-size / 2;
border: $spinner-thickness solid hsla(0,0%,100%,.1);
@if ($spinner-3d) {
// mask smoothens out the anti-aliasing artifacts in the back.
-webkit-mask: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,0%,1) 90% );
transform-origin: 50% 60%;
transform: perspective($spinner-size) rotateX(66deg);
animation: spinner-wiggle $spinner-speed $spinner-loops;
}
}
@keyframes spinner-wiggle {
30% { transform: perspective($spinner-size) rotateX(66deg); }
40% { transform: perspective($spinner-size) rotateX(65deg); }
50% { transform: perspective($spinner-size) rotateX(68deg); }
60% { transform: perspective($spinner-size) rotateX(64deg); }
}
.spinner:before,
.spinner:after {
content: "";
position: absolute;
margin: -$spinner-thickness;
box-sizing: inherit;
width: inherit;
height: inherit;
border-radius: inherit;
opacity: .05;
border: inherit;
border-color: transparent;
animation: spinner-spin $spinner-speed cubic-bezier(.6,.2,0,.8) $spinner-loops,
spinner-fade $spinner-speed linear $spinner-loops;
}
.spinner:before {
border-top-color: hsl(190,100%,70%);
}
.spinner:after {
border-top-color: hsl(50,80%,70%);
animation-delay: $spinner-speed * 0.25;
}
@keyframes spinner-spin {
100% { transform: rotate(360deg); }
}
@keyframes spinner-fade {
20% { opacity: .1; }
40% { opacity: 1; }
60% { opacity: .1; }
}
body {
display: flex;
padding: 50px;
box-sizing: border-box;
background: radial-gradient( hsl(200,40%,20%), hsl(200,30%,6%) );
}
html, body { height: 100%; }
