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.
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:
overlayStyleOptionsModify the CSS styles that are applied to the generated overlay nodespinnerStyleOptionsSame 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 :)