I use css loaders for a lot of my work in the Web App world. It’s a great way to indicate to users when an action is happening behind the scenes rather than leave them wondering if their internet connection has dropped out, or the world has ended. Bleh!

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);
}

Leave a comment if you liked this post! And ask for anything else you’d like to see :). Andy.

The end. But not really...