Oliver Nassar

I can be reached at onassar@gmail.com.

For my open source work, check out github.com/onassar


[jQuery Plugin] jQuery.Spin Overlay/Spinner Plugin

View more posts

I wanted to dim out a part of the page and center/vertically align a spinner. I tend not to search for things as often as I ought to, so created a plugin that accomplishes this task.


Press me for a quick demo

The code for that example?

$('#tmp-wrapper').spin();
setTimeout(function(){ $('#tmp-wrapper').spin(); }, 3500);

Want a spinner for the whole page?
Try this out: Fixed example spinner

$(window).spin();
setTimeout(function(){ $(window).spin(); }, 3500);

You can find it on GitHub here: https://github.com/onassar/JS-jQuerySpin


The method spin can be called on any DOM node or range (eg. $('ul#list li').spin()). It is a toggler, in that to turn it off, you just make a call to it again.

I'm not going to show any advance usage as it's meant to be a drop-in script, but the spin method optionally accepts two objects:

  1. overlayStyleOptions Modify the CSS styles that are applied to the generated overlay node
  2. spinnerStyleOptions Same as above for the generated spinner node

I haven't tested this across browser, so if you find something funky, email me (onassar@gmail.com) and let me know. Or optionally fork it and open a pull-request.

Finally, I apply the following two CSS properties to the generated spinner node, which won't work across all browsers:

borderRadius: '6px'
boxShadow: '0 0px 6px #666'

Comment those out if you like.
If you find it useful, maybe you'll like my imnosy.com project :)