JavaScript and CSS Spinners with spin.js
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?
I’d love to see this incorporated with the MooTools More Spinner class. That being said, I will still be using it as is.
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.
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.
Awesome and fresh.
Really awesome trick.
Thanks, I am already using this in my projects. Its pretty nice.
Would be nice to put countdown numbers into the center of circle like on old movies.
Direction have to be changeable too. (Negative speed, perhaps?)
‘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!
Prior comment was in reference to the Mux Loader link, sry for some reason it did not post as a reply
Yeah, it’s time to say goodbye to GIFs. Here’s another one.
http://james.padolsey.com/javascript/sonic-looping-loaders/
Demo: http://padolsey.net/p/Sonic/repo/demo/square.html
It is supper cool but would like to say that Would be nice to put countdown numbers into the center… shows it is working :)
This technique will save some bandwith each month and more important, reduce my loading time. Awesome!
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
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
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