Skip to content

Instantly share code, notes, and snippets.

@innotekservices
Created October 16, 2011 02:39
Show Gist options
  • Select an option

  • Save innotekservices/1290439 to your computer and use it in GitHub Desktop.

Select an option

Save innotekservices/1290439 to your computer and use it in GitHub Desktop.
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);
@huarui2219
Copy link
Copy Markdown

Thanks!

@bitconfig
Copy link
Copy Markdown

Great work!

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

@danmakk
Copy link
Copy Markdown

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