.loader-ring
.loader-ring-light
.loader-ring-track
View Compiled
@import "compass/css3";
$loader-ring-size: 240px;
$loader-ring-border-size: 4px;
.relative {
position: relative;
}
.loader-ring {
position: absolute;
top: 50%;
left: 50%;
margin: $loader-ring-size/-2 0 0 $loader-ring-size/-2;
width: $loader-ring-size;
height: $loader-ring-size;
}
.loader-ring-light {
width: $loader-ring-size;
height: $loader-ring-size;
@include border-radius($loader-ring-size);
@include box-shadow(0 $loader-ring-border-size 0 lighten(#0087bf, 10%) inset);
animation: rotate-360 2s linear infinite;
}
.loader-ring-track {
position: absolute;
top: 0;
left: 0;
width: $loader-ring-size;
height: $loader-ring-size;
@include border-radius($loader-ring-size);
@include box-shadow(
0 0 10px $loader-ring-border-size rgba(black, .3) inset
);
}
@keyframes rotate-360 {
from {
@include rotate(0);
}
to {
@include rotate(360deg);
}
}
body {
background-color: rgba(black, .87);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.