If you’ve read some of my other blog posts about SASS mixins or checkboxes you’ll know I’m a huge fan of minimalist code – hence the SASS below can actually be used as an :after or :before pseudo on most elements. This comes in really handy for buttons. If your user has just submitted a form, apply a class like ‘.button-loading’ to the button and in your CSS trigger a :before pseudo selector that extends the .loader-circle-dark (or -light) code – voila you have a spinner over the button. A nice handy trick here to get rid of the text underneath is to force color: transparent !important; to hide the text color ;).

Note: the below code requires a transform mixin – get my latest mixin list here, and the loaders I use are hidden by default!. Use Jquery to show them, or simply replace display: none; with display: inline-block (for inline loaders), or display: block; for positioned loaders.

Well, as always – brief and fun. Enjoy!

/*

  Loaders
  @author - Andy Crone
  + All spinning loaders are CSS3 driven for performance reasons.

*/

$loader-circle-size:   20px;
$loader-color-dark:    rgba(0,0,0,.4);
$loader-color-light:   rgba(255,255,255,.8);


// ==== Circle Loader
@keyframes loader-circle-animate{
  0%{
    @include transform(rotate(0deg));
  }
  100%{
    @include transform(rotate(360deg));
  }
}
@-ms-keyframes loader-circle-animate{
  0%{
    @include transform(rotate(0deg));
  }
  100%{
    @include transform(rotate(360deg));
  }
}
@-moz-keyframes loader-circle-animate{
  0%{
    @include transform(rotate(0deg));
  }
  100%{
    @include transform(rotate(360deg));
  }
}
@-o-keyframes loader-circle-animate{
  0%{
    @include transform(rotate(0deg));
  }
  100%{
    @include transform(rotate(360deg));
  }
}
@-webkit-keyframes loader-circle-animate{
  0%{
    @include transform(rotate(0deg));
  }
  100%{
    @include transform(rotate(360deg));
  }
}

// Default circle loader
%loader-circle{
  display: none; // Hidden by default so that you can 'show' them when necessary!
  position: relative;
  width: $loader-circle-size;
  height: $loader-circle-size;
  background: transparent;
  font-size: 0;
  line-height: 0;
  @include animation(loader-circle-animate,600ms,infinite,linear);
  @include border-radius(100%);
  border-style: solid;
  @include box-shadow(0 0 3px rgba(0,0,0,.1));
  border-width: 2px 2px 1px 0;
}

// Colouring
.loader-circle-dark{
  @extend %loader-circle;
  border-color: $loader-color-dark rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
}
.loader-circle-light{
  @extend %loader-circle;
  border-color: $loader-color-light rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);
}