Simple CSS spin loading

loading.html

 <div class="spin-loading"></div>

spin.css

//Extracted from: http://jsfiddle.net/chadkuehn/1twpzLz8/

$spin-diameter: 30px;
$spin-border: 5px;
$spin-time: 1000ms;

.spin-loading {
  display: block;
  width: $spin-diameter;
  height: $spin-diameter;

  @include border-radius(50%);
  border: $spin-border solid grey;
  border-right: $spin-border solid black;
  border-top: $spin-border solid black;

  -webkit-animation: spin $spin-time infinite linear;
  animation: spin $spin-time infinite linear;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}