jQuery.cSpinner Demo #1

A jQuery plugin to create animated loading indicators using the canvas element. https://github.com/mrienstra/jQuery.cSpinner

by mrienstra

HTML

<div id="loading_indicator"><img src="http://michaelrienstra.com/jquery.cspinner/demo/spinner.gif" alt=""></div>

CSS

body{margin:2em}

JavaScript

/*!
 * jQuery.cSpinner, v0.2.6
 * https://github.com/mrienstra/jQuery.cSpinner
 *
 * Copyright 2011, Michael Rienstra
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * A jQuery plugin to create animated loading indicators using the canvas element
 *
 * Date: Mon Nov 14, 2011
 */

/* GJsLint http://code.google.com/closure/utilities/
 * Currently passing, except for overly long lines.
 */

/* To Do:
 *     * There is a bug in the way we calculate opacity falloff, the result is actually kind of cool, but not expected.
 *     * Add color animations -- use code from jQuery UI?
 *     * Allow scale to be defined in: px, % (relative to parent?) or em?
 *     * Add error handling for a failure to retrieve “fallbackSourcesArray”.
 *
 * Experiments:
 *     * CSS3 transform:rotate(): http://jsfiddle.net/mrienstra/X3KjE/
 *           Notes: Looks pixelated, even shrunk 50% — would require additional images for any “non-square” rotations — e.g. 3 images for a 12-segment spinner.
 *     * Using an image as the base: http://jsfiddle.net/mrienstra/6nDqP/
 *           Notes: Works great, integrate?
 */

(function($) {
  'use strict';
  var pluginName = 'cSpinner', // Used primarily for namespacing.

      randomInt = function() {
        return String(Math.random()).substring(2);
      },

      methods = {
        init: function(options) {
          // Initialize a new spinner, then begin animating (unless options include “autoStart: false”).

          var jqueryObject = this,

              canvasSupport = (function() {
                // Level of canvas support, returns “full”, “partial”, or “none”.
                // “full” means the “toDataURL” canvas method is available.
                // Note that this a self-invoking function.
                var elem = document.createElement('canvas');
                if (elem.getContext && elem.getContext('2d')) {
                  return (elem.toDataURL('image/png').indexOf('data:image/png') === 0) ? 'full' :...