Spin.js - CSS3 Spinning activity indicator

Andrew Thorp Andrew Thorp

Felix Gnass created a handy JavaScript utility that makes it very easy to add a “spinner” to your website. The project is very small (~2k), has no dependencies, uses CSS for styling/animations and has fallbacks for older browsers.

After including the JavaScript library:

var target = document.getElementById("spinner-wrapper");
var spinner = new Spinner({lines: 12, color: "#fff"}).spin(target);

Voila! You now have a spinner inside of the element you specified as your target. It is highly customizable (number of lines, color, thickness, radius, speed, trail, etc). If you want to use it with jQuery, they have an example showing you how.

Head on over to GitHub to browse the source, or view the example page with customizable sliders.

0:00 / 0:00