Saturday, July 24, 2010

jQuery Canvas Loader Plugin

 Hi everyone,

I want to tell you about a new jQuery plugin I just released yesterday. It's called Canvas Loader and it provides a canvas replacement to the  standard Ajax Loading images we're all used to seeing around the web. This is helpful for the mobile space because Android for example does not support animated gifs, but it does support the canvas tag. It's also neat because by default it's transparent and is easily customizable. The actual un-minified size is likely bigger than the a small loader image, but not by much and if included with the main javascript of the site it should actually download faster.

While the plug-in takes a lot of options. The main functionality can be triggered by calling this simple method. It tires to match the width and height of an existing image.  Currently, you must have an actual image that is being replaced!


Check it out for an example and the code:



  1. Hi,

    I'm trying to use jQuery Canvas Loader but I'm unable to get it working.

    Meanwhile I visited the website through Android 1.5 and there's no loading animation.


  2. I'm very sorry. I looked into this and it looks like it only works in Android 1.6 and higher. Just tested it in the emulator. 1.5 as you've seen doesn't seem to do any animation. I'm not sure why. :-/

    There's another version of the plugin that doesn't rely on jquery here:



  3. It has taken me ages to discover your site. Finally. This is just the information I was looking for.
    Thank you.
    Jac@Jakarta Hotel

  4. Thank you for an excellent weblog !! I discovered some useful information and will suggest your blog for all my buddies.
    Rumah Dijual

  5. Hello,
    Does anyone know how to replace the jQuery mobile gif.png loader with this new canvas loader ?
    Thank you