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

10 Replies
Mike Bubyn

Hi Kevin,

I have been looking at using AJAX spinners  as a way to add the coveted animation to a custom next buttons at the end of the timeline. Perhaps this is an updated way of providing that functionality. 

Can you provide the source file for your demo above and I will see what I can come up with.

Math Notermans

In fact i am trying to get a combo of SVG and filters working. Guess the only option to get that working in SL2 will be somewhat like your solution here.

My main idea is using SVG and filters to create effects dynamically on elements with Javascript, mostly by using GSAP. Got the GSAP library working inside SL2. Now SVG is the only remaining hurdle...