Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
jQuery Plugin for Spin.js
You can now create a spinner using any of the variants below:
$("#el").spin(); // Produces default Spinner using the text color of #el.
$("#el").spin("small"); // Produces a 'small' Spinner using the text color of #el.
$("#el").spin("large", "white"); // Produces a 'large' Spinner in white (or any valid CSS color).
$("#el").spin({ ... }); // Produces a Spinner using your custom settings.
$("#el").spin(false); // Kills the spinner.
(function($) {
$.fn.spin = function(opts, color) {
var presets = {
"tiny": { lines: 8, length: 2, width: 2, radius: 3 },
"small": { lines: 8, length: 4, width: 3, radius: 5 },
"large": { lines: 10, length: 8, width: 4, radius: 8 }
if (Spinner) {
return this.each(function() {
var $this = $(this),
data = $;
if (data.spinner) {
delete data.spinner;
if (opts !== false) {
if (typeof opts === "string") {
if (opts in presets) {
opts = presets[opts];
} else {
opts = {};
if (color) {
opts.color = color;
data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
} else {
throw "Spinner class not available.";

Great work, thanks.


aerweb commented Jul 7, 2012


Klaitos commented Jul 11, 2012

Useful, thanks

Very useful, thanks.I wrote small extension for simpler version

Awesome! Thanks.

Thanks so much.

I forked and created this version of stop I think it's cleaner to use the same function, e.g. target.spin(false);


Helpful. Great.

How i use spin.js

1- div id="customSpinner" class="customSpinnercss" /div - [removing < ]

2- $('#customSpinner').spin();
3- .customSpinnercss {

color: black;
width: 150%;
position: fixed;
left: auto;
bottom: auto;
right: auto;
z-index: 2147483646;
-moz-box-shadow: 0px 0px 3px #8a8a8a;
-webkit-box-shadow: 0px 0px 3px #8a8a8a;
box-shadow: 0px 0px 3px #8a8a8a;
background: transparent;
margin-left: -280px;
4- $('#customSpinner').data('spinner').stop();
Everything works fine. But after calling stop, do i need to alter z-index ? Because due to overlay div i cannot modify the content below that div. What i did is $(''#customSpinner').css('z-index','-1') after calling stop.

Any comments for this approach ?

Awesome, thanks.

I'd love to see this bundled into the spin.js project. :)

Thank you umairsaleemid. Your example worked perfectly.

Love this. I usually copy and paste the contents of spin.min.js into this file before using it, and remove the error handling for the Spinner object not being available.

freyley commented Jun 3, 2013

Hey ITS-Florida: what's the license on this file?


Great work!

Sharing a live customizable fiddle for spin.js -

danmakk commented Jun 7, 2016

It works perfectly. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment