Created
October 16, 2011 02:39
-
-
Save innotekservices/1290439 to your computer and use it in GitHub Desktop.
jQuery Plugin for Spin.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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); |
Thank you umairsaleemid. Your example worked perfectly.
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.
Hey ITS-Florida: what's the license on this file?
Thanks!
Great work!
Sharing a live customizable fiddle for spin.js -http://bitconfig.com/spin/bitconfig_spin.html
It works perfectly. Thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'd love to see this bundled into the spin.js project. :)