Skip to content

Instantly share code, notes, and snippets.

Embed
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 = $this.data();
if (data.spinner) {
data.spinner.stop();
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.";
}
};
})(jQuery);
@camilonova

This comment has been minimized.

Copy link

@camilonova camilonova commented Feb 22, 2012

Great work, thanks.

@vkovalskiy

This comment has been minimized.

Copy link

@vkovalskiy vkovalskiy commented Mar 19, 2012

Thanks!

@aerweb

This comment has been minimized.

Copy link

@aerweb aerweb commented Jul 7, 2012

Thanks

@Klaitos

This comment has been minimized.

Copy link

@Klaitos Klaitos commented Jul 11, 2012

Useful, thanks

@caulfield

This comment has been minimized.

Copy link

@caulfield caulfield commented Jul 26, 2012

Very useful, thanks.I wrote small extension for simpler version https://gist.github.com/3180981

@fthzkrtn

This comment has been minimized.

Copy link

@fthzkrtn fthzkrtn commented Aug 24, 2012

Awesome! Thanks.

@filosganga

This comment has been minimized.

Copy link

@filosganga filosganga commented Oct 14, 2012

Thanks so much.

@tsgautier

This comment has been minimized.

Copy link

@tsgautier tsgautier commented Nov 22, 2012

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

@dmuneras

This comment has been minimized.

Copy link

@dmuneras dmuneras commented Jan 11, 2013

Thanks.

@kishoreneelamegam

This comment has been minimized.

Copy link

@kishoreneelamegam kishoreneelamegam commented Jan 21, 2013

Helpful. Great.

@umairsaleemid

This comment has been minimized.

Copy link

@umairsaleemid umairsaleemid commented Feb 4, 2013

How i use spin.js

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

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

color: black;
width: 150%;
height:1000px;
position: fixed;
left: auto;
top: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 ?

@martynasb

This comment has been minimized.

Copy link

@martynasb martynasb commented Feb 23, 2013

Awesome, thanks.

@mreinstein

This comment has been minimized.

Copy link

@mreinstein mreinstein commented Feb 25, 2013

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

@impressto

This comment has been minimized.

Copy link

@impressto impressto commented Mar 5, 2013

Thank you umairsaleemid. Your example worked perfectly.

@davidnjohnson

This comment has been minimized.

Copy link

@davidnjohnson davidnjohnson commented Apr 18, 2013

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

This comment has been minimized.

Copy link

@freyley freyley commented Jun 3, 2013

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

@huarui2219

This comment has been minimized.

Copy link

@huarui2219 huarui2219 commented Sep 23, 2013

Thanks!

@bitconfig

This comment has been minimized.

Copy link

@bitconfig bitconfig commented Jan 19, 2014

Great work!

Sharing a live customizable fiddle for spin.js -http://bitconfig.com/spin/bitconfig_spin.html

@danmakk

This comment has been minimized.

Copy link

@danmakk 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
You can’t perform that action at this time.