jquery.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 },
			"default": {
				lines: 11, // The number of lines to draw
				length: 2, // The length of each line
				width: 4, // The line thickness
				radius: 10, // The radius of the inner circle
				corners: 1, // Corner roundness (0..1)
				rotate: 0, // The rotation offset
				color: '#fff', // #rgb or #rrggbb
				speed: 1, // Rounds per second
				trail: 60, // Afterglow percentage
				shadow: false, // Whether to render a shadow
				hwaccel: false, // Whether to use hardware acceleration
				className: 'spinner', // The CSS class to assign to the spinner
				zIndex: 2e9, // The z-index (defaults to 2000000000)
				top: 'auto', // Top position relative to parent in px
				left: 'auto', // Left position relative to parent in px
				mask: 'rgba(0,0,0,0.5)'
			}
		};
		if (Spinner) {
			return this.each(function() {
				var $this = $(this),
					data = $this.data();

				if (data.spinner) {

					$this.find('.spin-mask').remove();

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

					if(opts.mask){
					
						var $spin_mask = $('<div class="spin-mask" style="position:absolute;top:0;left:0;width:100%;height:100%;clip:inherit;"></div>');

						$spin_mask.css('background-color', opts.mask);
						$spin_mask.css('z-index', opts.zIndex - 1);
						
						if($this.css('position') != 'relative'){

							var position = $this.position();

							$spin_mask.css('top', position.top + 'px');
							$spin_mask.css('left', position.left + 'px');
							$spin_mask.css('width', $this.outerWidth() + 'px');
							$spin_mask.css('height', $this.outerHeight() + 'px');
						}

						$this.append($spin_mask);
					}
				}
			});
		} else {
			throw "Spinner class not available.";
		}
	};
})(jQuery);