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

<script src="https://raw.github.com/mrienstra/jQuery.cSpinner/master/jquery.cspinner.min.js"></script>
<div class="info">
    <h3>Complex #1</h3>
    <p>Specifying a “drawSegment” function to create a custom spinner.</p>
</div>

<div id="draggable"><p>(Drag me under the spinner to see alpha transparency)</p></div>

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

CSS

body{margin:2em}

.info{float:right;width:12em;padding:2em;}

h3{font-size:1.25em;font-weight:bold;}

#draggable{width:14em;height:14em;background:#000;top:17em;color:#fff;font-size:0.75em;padding:3em;text-align:center;}

#loading_indicator{position:absolute;top:0.5em;left:2.5em;}

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({
  scale: 2,
  speed: 0.33,
  lineWidth: 5,
  segments: 16,
  outerRadius: 51,
  drawSegment: function (frameContext, calculateAlpha, segments, iteration, counter, minimumOpacity, settings, outerRadius) {
    var s = settings.scale,
        saturation = Math.round(100 * calculateAlpha()) + '%';
    frameContext.globalAlpha = calculateAlpha();
    frameContext.fillStyle = 'hsla(269, ' + saturation + ', 50%, 1)';
    if ([0, 4, 8, 12].indexOf(iteration) !== -1) {  
      frameContext.rotate(Math.PI * 2 / 4);
      frameContext.fillRect(19.0 * s, 0.4, 31.0 * s, 17.2 * s);
    } else if ([1, 5, 9, 13].indexOf(iteration) !== -1) {  
      frameContext.beginPath();
      frameContext.moveTo(19.0 * s, 17.5 * s);
      frameContext.lineTo(50.0 * s, 17.5 * s);
      frameContext.lineTo(50.0 * s, 34.6 * s);
      frameContext.bezierCurveTo(50.0 * s, 40.6 * s, 48.1 * s, 44.0 * s, 46.1 * s, 46.0 * s);
      frameContext.lineTo(18.5 * s, 18.5 * s);
      frameContext.bezierCurveTo(18.6 * s, 18.4 * s, 19.0 * s, 18.0 * s, 19.0 * s, 17.5 * s);
      frameContext.fill();
    } else if ([2, 6, 10, 14].indexOf(iteration) !== -1) {
      frameContext.beginPath();
      frameContext.moveTo(17.5 * s, 19.0 * s);
      frameContext.lineTo(17.5 * s, 50.0 * s);
      frameContext.lineTo(34.6 * s, 50.0 * s);
      frameContext.bezierCurveTo(40.6 * s, 50.0 * s, 44.0 * s, 48.1 * s, 46.0 * s, 46.1 * s);
      frameContext.lineTo(18.4 * s, 18.6 * s);
      frameContext.bezierCurveTo(18.3 * s, 18.7 * s, 18.0 * s, 19.0 * s, 17.5 * s, 19.0 * s);
      frameContext.fill();
    } else {
      frameContext.fillRect(17.3 * s, 19.0 * s, -17.3 * s, 31.0 * s);
    }
 ...