.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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.