Collection of loading indicators animated with CSS as WebObjects

In Smashing Magazine' newsletter published today, there's an article about spinning loading bars (animated preloaders). While using a preloader for Storyline is not really necessary, in some cases they can be useful as a design element or a progress timer.

The issue as you know with custom animations is they are typically SWF files and will only work on desktop but not on some mobile devices and not at all on iOS devices.

The programmer highlighted in this article is @tobiasahlin. The collection of loading indicators is referred to as SpinKit and can be seen here. The cool thing is he's shares the source code on this site as well as a link to GitHub where you can branch to your own GitHub and free of restriction usage license.

So...I was curious. Since these are CSS with SVG graphics and not SWF, I wondered how well it work as WebObjects in Storyline and published out for iOS for display on an iPad. After a bit of design thinking on the best way to package them all up on one slide it took about 2 hours to assemble. 

Here's the demo I put together > Animated WebObject preloaders. Works great on the iPad so try accessing via your iPad or tablet, too.

Process:

1. Copied the code from GitHub and created individual index.html files organized the same way.
2. Assembled a .story file with eight (8) layers for each WebObject.
3. Base slide contains the navigation buttons to show each of the layers along with the buttons to link out to same above links
4. Inserted a WebObject on each layer and pointed to its respective index.html file.
5. At launch, show the first layer.
6. That's it!

Would love to hear if anyone has done similar ideas using CSS and SVG. Or, if you have any application ideas on how to use these.

Note: For CSS3 browser support see > http://caniuse.com/css-animation