Canvas Preloaders: Pretty ways to load content

Sonic Loaders

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.

5 thoughts on “Canvas Preloaders: Pretty ways to load content

  1. Hi and thank you for this great article. I’m sorry for the noobiness, but I’d like to know how to implement them. I mean, to have them being displayed while my images and sounds are loading, and then disappear when everything is ready.
    If someone could give me some clues or point me to an article, that’d be very neat!

    Thanks in advance

    Eric

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *