Modern web apps are continuing to increase in complexity and file size, and with that we need more graceful ways to load our content. Preloading animations to the rescue!
Preloaders have a poor reputation in web development, mostly thanks to bad memories of bulky Flash websites who’s ambitious media downloads were somewhat ahead of the current bandwidth capabilities. But of course, even in JavaScript, it’s going to take time to load all of your highly polished images, video and audio. Thankfully, if applied properly, preloaders can be the perfect interlude to keep our visitors entertained whilst the app quickly downloads in the background.
The “Sonic” canvas loader by James Padolsey (@padolsey) is a great example of creative JavaScript using canvas. View Source recommended!
Another good example is HeartCode CanvasLoader by Robert Pataki (@iHeartcode). It’s a JavaScript library for drawing animated circular preloaders in canvas. It’s open source on GitHub and can be completely customised with a great little interface on the site.
Another alternative is the Spin.js jQuery plugin by Felix Gnass (@fgnass). This one is a cute use of jQuery and CSS3 for a Mac-style spinning preloader with lots of parameters to tweak the shape and size. But for me, this is probably going overboard when a simple animated GIF or even a simpler use of only CSS3 would suffice.
Let us know if you can think of any more sexy JavaScript, CSS or canvas-based preloading animations! Hopefully we can build a collection as impressive as the Flash-based PrettyLoaded.