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.

Show comment
Hide comment
@camilonova

camilonova Feb 22, 2012

Great work, thanks.

camilonova commented Feb 22, 2012

Great work, thanks.

@vkovalskiy

This comment has been minimized.

Show comment
Hide comment
@vkovalskiy

vkovalskiy commented Mar 19, 2012

Thanks!

@aerweb

This comment has been minimized.

Show comment
Hide comment
@aerweb

aerweb commented Jul 7, 2012

Thanks

@Klaitos

This comment has been minimized.

Show comment
Hide comment
@Klaitos

Klaitos Jul 11, 2012

Useful, thanks

Klaitos commented Jul 11, 2012

Useful, thanks

@caulfield

This comment has been minimized.

Show comment
Hide comment
@caulfield

caulfield Jul 26, 2012

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

caulfield commented Jul 26, 2012

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

@fatihzkaratana

This comment has been minimized.

Show comment
Hide comment
@fatihzkaratana

fatihzkaratana Aug 24, 2012

Awesome! Thanks.

fatihzkaratana commented Aug 24, 2012

Awesome! Thanks.

@filosganga

This comment has been minimized.

Show comment
Hide comment
@filosganga

filosganga Oct 14, 2012

Thanks so much.

filosganga commented Oct 14, 2012

Thanks so much.

@tsgautier

This comment has been minimized.

Show comment
Hide comment
@tsgautier

tsgautier 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);

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.

Show comment
Hide comment
@dmuneras

dmuneras commented Jan 11, 2013

Thanks.

@indykish

This comment has been minimized.

Show comment
Hide comment
@indykish

indykish Jan 21, 2013

Helpful. Great.

indykish commented Jan 21, 2013

Helpful. Great.

@umairsaleemid

This comment has been minimized.

Show comment
Hide comment
@umairsaleemid

umairsaleemid 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 ?

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.

Show comment
Hide comment
@martynasb

martynasb Feb 23, 2013

Awesome, thanks.

martynasb commented Feb 23, 2013

Awesome, thanks.

@mreinstein

This comment has been minimized.

Show comment
Hide comment
@mreinstein

mreinstein Feb 25, 2013

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

mreinstein commented Feb 25, 2013

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

@impressto

This comment has been minimized.

Show comment
Hide comment
@impressto

impressto Mar 5, 2013

Thank you umairsaleemid. Your example worked perfectly.

impressto commented Mar 5, 2013

Thank you umairsaleemid. Your example worked perfectly.

@davidnjohnson

This comment has been minimized.

Show comment
Hide comment
@davidnjohnson

davidnjohnson 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.

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.

Show comment
Hide comment
@freyley

freyley Jun 3, 2013

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

freyley commented Jun 3, 2013

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

@huarui2219

This comment has been minimized.

Show comment
Hide comment
@huarui2219

huarui2219 commented Sep 23, 2013

Thanks!

@bitconfig

This comment has been minimized.

Show comment
Hide comment
@bitconfig

bitconfig Jan 19, 2014

Great work!

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

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.

Show comment
Hide comment
@danmakk

danmakk Jun 7, 2016

It works perfectly. Thanks!

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