Canvas Loader JS

Description

This script replaces typical animated gif loading image with a canvas based loader of a similar width and height. This is super helpful when developing mobile apps that might be viewed on Android, which does not support animated GIFs. It will also detect to see if you have canvas support before applying the replacement.

I also created a similar version of this script as a jQuery Plugin

Download

Usage:

Without options:


window.onload = function() {
   var el = document.getElementById("ajaxLoader");
   canvasLoaderReplace(el);
}

With options:


window.onload = function() {
   var el = document.getElementById("ajaxLoader");
   canvasLoader(el, {
       'radius':10,
       'color':'rgb(255,0,0),
       'dotRadius':10,
       'className':'canvasLoader',  
       'backgroundColor':'transparent',  
       'id':'canvasLoader1',
       'fps':10
   });
}

Options:

Examples

	window.onload = function() {
		var img = document.getElementById("imgLoader");
		var span = document.getElementById("spanLoader");
		canvasLoaderReplace(img, {color:'red'});
		canvasLoaderReplace(span, {backgroundColor:'red', radius:'40'});
	};

Author