Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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

Great work, thanks.

@vkovalskiy

Thanks!

@aerweb

Thanks

@Klaitos

Useful, thanks

@caulfield

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

@uphAcLic

Awesome! Thanks.

@filosganga

Thanks so much.

@tsgautier

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

Thanks.

@indykish

Helpful. Great.

@umairsaleemid

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

Awesome, thanks.

@mreinstein

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

@impressto

Thank you umairsaleemid. Your example worked perfectly.

@davidnjohnson

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

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

@huarui2219

Thanks!

@bitconfig

Great work!

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.