Command-Tab

Monday, May 7th, 2007 at 7:07 PM

In an earlier post, I put together a package of several spinner images for your Web 2.0 apps, however it was a bit lacking as far as scripting and programming goes. To make full use of the PNG “filmstrip” style spinners, you’ll need a bit of JavaScript to make them go.

If you use the exceptional jQuery JavaScript library to make your software shine, you’ll be able to easily load and run the PNG spinners with this little jquery.spinner.js plugin I put together. Included in the package is a simple HTML file detailing how to use the plugin, but the basics are as follows:

After including jquery.js (or jquery.pack.js) and jquery.spinner.js in your HTML head, set up an empty div and call the .spinner function with some simple parameters:

$(“#spinme”).spinner({ height: 48, width: 48, speed: 50, image: ’spotlight_spinner_big.png’ });

You can pass width, height, frame speed, and an image URL to set up the spinner, as well as call $.spinnerStop(); to halt the spinner.

While I’ve worked on a few jQuery plugins before, I’m not entirely sure all the programming conventions I’ve used are “correct” (like the global $.spinnerStop). That in mind, if you find any bugs or notice an issue, please let me know, and I’ll update the plugin as soon as possible. Get the plugin here.

Special thanks to the talented Rogie King for some last-minute fixes!

This entry was posted on Monday, May 7th, 2007 at 7:07 pm and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, trackback from your own site, or Stumble it!.