gistfile1.txt

/* Spinner
   ========================================================================== */

// size of small spinner
$spinner-size: 16px;

// size of big spinner
$spinner-big-size: 32px;

// border size of small spinner
$spinner-border-size: 2px;

// border size of big spinner
$spinner-big-border-size: 6px;

@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}

.spinner {
  // Make sure we use content box model for this
  &, &:before, &:after {
    @include box-sizing(content-box);
  }
  height: $spinner-size;
  width: $spinner-size;
  display: inline-block;
  position:relative;
  -webkit-animation: rotation 1s infinite linear;
  -moz-animation: rotation .1s infinite linear;
  -o-animation: rotation 1s infinite linear;
  animation: rotation 1s infinite linear;
  border: $spinner-border-size solid lighten($brand-primary,25%);
  border-radius: 100%;
  &:before {
     content:"";
     display:block;
     position:absolute;
     left:-$spinner-border-size;
     top:-$spinner-border-size;
     height: 100%;
     width: 100%;
     border-top: $spinner-border-size solid $brand-primary;
     border-left: $spinner-border-size solid transparent;
     border-bottom: $spinner-border-size solid transparent;
     border-right: $spinner-border-size solid transparent;
     border-radius: 100%;
  }
}

.spinner-big {
  height: $spinner-big-size;
  width: $spinner-big-size;
  border: $spinner-big-border-size solid lighten($brand-primary,25%);
  &:before {
     left:-$spinner-big-border-size;
     top:-$spinner-big-border-size;
     border-top: $spinner-big-border-size solid $brand-primary;
     border-left: $spinner-big-border-size solid transparent;
     border-bottom: $spinner-big-border-size solid transparent;
     border-right: $spinner-big-border-size solid transparent;
  }
}