JSFiddle - React, Tailwind, and code Playground

by mrienstra

HTML

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

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.
 *
 * Based on code by Thijs van der Vossen, Fingertips, http://www.fngtps.com
 *
 * A jQuery plugin to create animated loading indicators using the canvas element
 *
 * Date: Thu Jul 7, 2011
 */

/* JSLint http://www.jslint.com/
 * Currently “mostly passing” with the following settings:
 *     * “Assume a browser” (so we can use document, setInterval, & clearInterval).
 *     * And the following comment, telling JSLint that we’re assuming jQuery will already be declared.
 */
/*global jQuery: false */

/* To Do:
 *     * Add color animations -- use code from jQuery UI.
 *     * Allow scale to be defined in: px, % (relative to parent?) or em?
 *     * Allow the use of an animated GIF as a fallback.
 *     * 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 and begin animating.
                
                var jqueryObject = this,
                    
                    canvasSupport = (function () {
                        // Level of canvas support, returns “full”, “partial”, or “none”.
                        // “full” means the “toDataURL” canvas method is available.
                        var...