jQuery.cSpinner Demo #3

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

by mrienstra

HTML

<script src="https://raw.github.com/mrienstra/jQuery.cSpinner/master/jquery.cspinner.min.js"></script>
<div id="loading_indicator"></div>

JavaScript

/*!
 * jQuery.cSpinner, v0.3.0
 * https://github.com/mrienstra/jQuery.cSpinner
 *
 * Copyright 2012, 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: Wed Jan 18, 2012
 */

$("#loading_indicator").cSpinner({
    color: "rgba(0, 0, 70, 0.5)",
    scale: 3,
    shadow: true,
    innerRadius: 9,
    outerRadius: 9.00001,
    segments: 13,
    fallbackSourcesArray: "http://michaelrienstra.com/jquery.cspinner/demo/UpTnQ_uris.js"
})
.hover(
    function () { $(this).cSpinner("stop"); },
    function () { $(this).cSpinner("start"); }
);

/*
 * == Available Options ==
 *
 * "speed":                1, // Increase --> faster.
 * "scale":                1, // Increase --> larger.
 * "lineWidth":            3, // Thickness of “lines”.
 * "lineCap":              "round", // Other values: “butt”, “square”.
 * "innerRadius":          8.70, // Increase --> bigger empty “circle” in the middle, shorter “lines”.
 * "outerRadius":          14.42, // Increase --> longer “lines” (relative to innerRadius).
 * "color":                "#000", // Try rgba()!
 * "minimumOpacity":       0.18, // Fun to play with.
 * "segments":             12, // Number of “lines”.
 * "shadow":               false,
 * "shadowOffsetX":        1,
 * "shadowOffsetY":        1,
 * "shadowBlur":           1,
 * "shadowColor":          "rgba(10, 10, 10, 0.5)",
 * "pixelRatio":           1, // For high-dpi displays, like the iPhone 4.
 * "autoStart":            true, // If false, call $(el).cSpinner("start")
 * "pauseOnBlur":          true, // Stop animating when the window does not have focus.
 * "alwaysReplaceTarget":  false, // Replace the target element even if it’s a DIV. If you don't want to preserve any attributes of the target  element, you will also need to set “preserveExisting” to “[]”.
 * "fallbackSourcesArray": undefined, // The path to a JavaScript array of data URIs, for browsers...