Skip to content

Instantly share code, notes, and snippets.

@andyburke
Forked from innotekservices/jquery.spin.js
Created February 27, 2012 20:56
Show Gist options
  • Save andyburke/1926981 to your computer and use it in GitHub Desktop.
Save andyburke/1926981 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 },
"medium": { lines: 10, length: 8, width: 4, radius: 8 },
"large": { lines: 10, length: 16, width: 8, radius: 24 }
};
if (Spinner) {
return this.each(function() {
var $this = $(this),
data = $this.data();
if (data.spinner) {
data.spinner.stop();
delete data.spinner;
}
if (opts !== false) {
var preset = typeof opts === "string" ? opts : opts.preset;
if (typeof preset === "string") {
if (preset in presets) {
opts = $.extend( opts, presets[ preset ] );
}
if (color) {
opts.color = color;
}
}
data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
}
});
} else {
throw "Spinner class not available.";
}
};
})(jQuery);
@andyburke
Copy link
Author

I just forked this and made a slight modification, but maybe you'd like to include it:

https://gist.github.com/1926981

Changes:

  • Added a 'medium' spinner size.
  • Made it such that you can pass a preset with other options, eg:

$(element).spin( { 'preset': 'large', speed: 2 } );

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