jQuery.cSpinner Demo #1

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

HTML

<script src="https://raw.github.com/mrienstra/jQuery.cSpinner/master/jquery.cspinner.min.js"></script>
<div id="loading_indicator"><img src="http://michaelrienstra.com/jquery.cspinner/demo/spinner.gif" alt=""></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({
    speed: 0.5,
    color: "#fff",
    scale: 77,
    shadow: true
})
.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 without canvas support. See README.md for details.
 * "checkExistsInterval":  1000,
 * "preserveExisting":     ["id", "class", "style"]
 *...