Enhancement: Throbber JavaScript library

[GoogleCodeExporter]

I've put together a throbber JavaScript library and the associated PNG images 
with full 8-bit transparency to accomplish throbber effects identical to those 
seen in Apple's Settings.app (for example the WiFi page).

Best of all, the images are encoded using the data: protocol directly in the 
JavaScript library (which is a mere 11 KB with all 12 images encoded).

You can use the 'sprite' method (which uses all 12 encoded images in slideshow 
style), the 'rotate' method (my original attempt, works well, arbitrarily 
rotates one static image [the last sprite, in this case], but doesn't look as 
polished as Apple's end result), or the 'smooth' method--which doesn't work at 
all yet.  If you don't specify the type, it will default to sprite.

Just include the source file, then use
var t = new throbber(elementToPutThrobberInFrontOf, [type]);

The throbber will appear and start doing what its job.  After that, you can 
call the start, stop, hide, show, and remove methods on the returned throbber 
object (t.stop(), t.hide(), etc.).

The semitransparent throbber is a beautiful thing; this is the larger 12-spoke 
throbber (as opposed to the smaller 8-spoke one you see in the status bar).  
The throbbers I've seen implemented using transparent GIFs seem clumsy and 
aren't as polished, in my opinion.  To further demonstrate the difference, I've 
attached demonstrations of this throbber matted against several colors.

Original issue reported on code.google.com by eslind...@gmail.com on 3 Aug 2011 at 3:25

Attachments:

• throb_ffffff.gif
• throb_999999.gif
• throb_ff00ff.gif
• throb_0099ff.gif

[GoogleCodeExporter]

The last paragraph came to you courtesy of the department of redundancy 
department. ;)

Original comment by eslind...@gmail.com on 3 Aug 2011 at 3:27

[GoogleCodeExporter]

The code didn't upload on the first try, sorry...

Original comment by eslind...@gmail.com on 3 Aug 2011 at 3:29

Attachments:

• throbber.js