A cool CSS spinner with LESS variables

This is a quick and dirty translated post I wrote in French some time ago.

I was playing with some css 2D transforms when I kinda ended with this css spinner :) I chose LESS and yes I could have used SASS, sorry for fan boys :P.

The spinner itself






The HTML code

<div class="loader rspin">
  <span class="c"></span>
  <span class="d spin"><span class="e"></span></span>
  <span class="r r1"></span>
  <span class="r r2"></span>
  <span class="r r3"></span>
  <span class="r r4"></span>
</div>

The CSS code

Ok ok, the end CSS is quite hard to read so here's the LESS variables at the beginning of the file.

@loaderSize       : 55px;
@radThickness     : @loaderSize/10;
@spinSpeed        : 750ms;
@backgroundColor  : #eee;
@forgroundColor   : #ccc;
@masksColor       : #fff;
@middleCircleSize : 68%;

From the @loaderSize variable you can control the spinner height, preserving all its children elements proportions.

Pros

  • Works on every modern browsers and on mobiles.
  • No HTTP request to load an animated gif file.
  • You can zoom you browser and the spinner will stay perfect.
  • Its height is customizable with the LESS variables.
  • Permet de frimer en soirée geek :) [just don't know how to translate this in english]

Cons

  • More complicated to manage than a simple animated gif.
  • No ie9.
  • 8 divs instead of one tag.
Be Sociable, Share!

    Commentaires

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>