Draw and Animate (Pre)Loaders with jQuery and Canvas - CanvasLoader

File Size: 18.4 KB
Views Total: 9238
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Draw and Animate (Pre)Loaders with jQuery and Canvas - CanvasLoader

CanvasLoader is a jQuery plugin which uses Html5 canvas element to create an animated (pre)loader with an overlay appending to an Html element. If canvas loader is bound to an element, then it will be displayed as an overlay and pending in the element middle. If canvas loader is bound to the body element, then it will be displayed as an overlay which covers the hole screen and stays fixed while body element is scrolling.

How to use it:

1. Include the necessary jQuery javascript library and Heartcode's CanvasLoader Javascript library in the document.

<script type="text/javascript" src="heartcode-canvasloader.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Include the jQuery canvasLoader plugin after jQuery library.

<script src="index.js"></script>

3. Initialize the plugin to append a loader to an DIV element.

jQuery(function ($) {
"use strict";
var element = $('<div></div>').css({
width: 500,
height: 500,
border: '3px dashed green'
}).appendTo('body');

/**
 * Initial display canvas loader
 */
element.canvasLoader({
color: '#ff0000'
});

/**
 * Remove canvas loader on the origin instance
 */
element.canvasLoader(false);

/**
 * Reactivate canvas loader on the origin instance
 */
element.canvasLoader(true);

/**
 * Remove canvas loader by event if the origin instance is not available
 */
$(element).trigger('stop.canvasLoader');

/**
 * Manipulate options of current canvas loader instance
 */
element.canvasLoader.options.color='#008000';

/**
 * Reactivate canvas loader by event if the origin instance is not available
 */
$(element).trigger('start.canvasLoader');

/**
 * Manipulate default options
 */
$.fn.canvasLoader.options.color = '#0000ff';

/**
 * Get current version.
 * @type {string}
 */
var version = $.fn.canvasLoader.version;

});

4. Available options.

//  enable the loader during initialization
start: true,

// oval, square, rect(rectangle), roundRect(rounded rectangle) and spiral
shape: 'spiral', 

// Sets hexadecimal color of the loader
color: '#000', 

// Sets the diameter of the loader
diameter: 70, 

// Sets the number of shapes drawn on the loader canvas
density: 70, 

// Sets the amount of the modified shapes in percent.
range: 0.7, 

// Sets the speed of the loader animation.
speed: 2, 

// Sets the rendering frequency.
fps: 24 

Change logs:

2015-02-11

  • Optimizations

2014-08-06

  • v3 release

This awesome jQuery plugin is developed by orianda. For more Advanced Usages, please check the demo page or visit the official website.