JavaScript and CSS Spinners with spin.js

By  on  
spin.js AJAX spinner

I think it's safe to say the days of using images to provide the "small touches" are over.  We can now safely create gradients, drop shadows, rounded corners, and scaled, rotated, transformed animations.  It seems we've now moved on to replacing more complex effects, like spinner images.  A great project called spin.js has surfaced, allowing developers to create CSS-powered spinners where keyframes are available, and uses VML as a fallback for Internet Explorer. spin.js is very customizable and is built with pure JavaScript so that no toolkit is required (though a jQuery plugin is available within the site demo).   Let's have a look at how to use and customize spin.js!

I promised above that spin.js allows for very customizable spinners and I wasn't lying;  spin.js allows you to customize a spinner's number of lines, length, width, line radius, trail, spin speed, shadow, and color.  A simple spin.js usage looks like:

// Create the Spinner with options
var spinner = new Spinner({
	lines: 12, // The number of lines to draw
	length: 7, // The length of each line
	width: 5, // The line thickness
	radius: 10, // The radius of the inner circle
	color: '#000', // #rbg or #rrggbb
	speed: 1, // Rounds per second
	trail: 100, // Afterglow percentage
	shadow: true // Whether to render a shadow
}).spin(document.getElementById("ajaxContentHolder")); // Place in DOM node called "ajaxContentHolder"

The Spinner instance receives the options and the spin method accepts a DOM node which should host the generated spinner.  The advantage of providing a DOM node to the show method is that you can use the same Spinner instance in multiple spots by simply giving a different DOM node each time.  With the expansive set of options, you can create a spinner of any size, speed, and color!

spin.js is a real work of art -- big props to Felix Gnass for his excellent work.  Spinners will only grow in importance while websites become more AJAX-drive, so a customizable JavaScript alternative to imagery is hugely helpful.  What image replacement technique should we look for next?

Recent Features

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

Discussion

  1. I’d love to see this incorporated with the MooTools More Spinner class. That being said, I will still be using it as is.

  2. How’s this compare to an image in terms of CPU and battery usage? Super cute, but seems like a bit of overkill for what it does.

    • I saw someone do a test on this. It does take more memory usage in FF, but was almost the same in Web Kit. Obviously IE would be a lot slower…

      But I think the important thing here is putting the processing on the user side. When it’s an image, we have to transfer that image down for the server, whereas this plugin is small compared to an image. And for a developer it means you won’t have to find a new image for different backgrounds.

  3. First reaction:
    What will one use to preload the preloader?

    Second reaction:
    Call me a lazy one, but the demo is missing a textfield where lazy ones like me can easily copy selected (slidered?) values. You would have to add a color-field, too. :-)

    • The speed at which this js starts up is faster than downloading a similar animated image.

      The ability to copy the options from the demo would be cool.

  4. Awesome and fresh.

  5. Really awesome trick.

  6. Peter StJ

    Thanks, I am already using this in my projects. Its pretty nice.

  7. Lunohod

    Would be nice to put countdown numbers into the center of circle like on old movies.

  8. Lunohod

    Direction have to be changeable too. (Negative speed, perhaps?)

  9. Nick

    ‘s Nice.

    Here’s a mootools one (click the name of each demo to make it go…)
    http://mootools.net/forge/p/mux_loaders

    • Hmm, similar but not the same. This class is not compatible with IE6 and the color/border radius do not play nicely with the entire IE family. With that being said and if you can live with that it is an uber cool Class.

      Thinking I may port this to Mootools this evening, will post back if I get it done!

  10. Prior comment was in reference to the Mux Loader link, sry for some reason it did not post as a reply

  11. It is supper cool but would like to say that Would be nice to put countdown numbers into the center… shows it is working :)

  12. This technique will save some bandwith each month and more important, reduce my loading time. Awesome!

  13. B L Praveen

    Hi tried it using with a overlay.
    But it show always spinner image width and height 0px.

    $("#visitors ").append($('').append(""));
    var spinner = new Spinner(opts).spin();
    $("#visitors #overlay").append(spinner.el);				  
    

    it is no working

  14. Hi David,

    I’m a big fan of your blog and nice post BTW.

    I read some comments where people needed text boxes for colors and numbers. We got exactly the stuff.

    Sharing a live customization fiddle for spin.js here – http://bitconfig.com/spin/bitconfig_spin.html

    Hope this helps. Let us know if you got any great plugins.

    – Patrick

  15. Sean

    Hi David

    The spinner for spin.js doesn’t work well with IE7 & IE8 of Internet Explorer. It cause the spinner to show up as a small black rectangle box. Any idea if any other scripts are needs to make this work for older browers

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!