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 #3</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"></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:2em;left:4.4em;}

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.33,
    scale: 4,
    lineWidth: 1.65,
    outerRadius: 18,
    invisibleSegments: 1,
  drawSegment: function (frameContext, calculateAlpha, segments, iteration, counter, minimumOpacity, settings, outerRadius) {
    frameContext.globalAlpha = calculateAlpha();
    var hue = (iteration + 1) * 360 / segments,
        radius = (outerRadius - settings.innerRadius) / 2;
    frameContext.strokeStyle = "hsla(" + hue + ", 100%, 50%, 1)";
    frameContext.rotate(Math.PI * 2 / segments);
    frameContext.beginPath();
    if (counter === 0 && iteration === segments - 1 || iteration + 1 === counter) {
      frameContext.arc(0, settings.innerRadius + radius, radius, Math.PI * -0.17, Math.PI * 1.55, false);
    } else {
      frameContext.arc(0, settings.innerRadius + radius, radius, Math.PI * -0.17, Math.PI * 0.72, false);
      frameContext.stroke();
      frameContext.beginPath();
      frameContext.arc(0, settings.innerRadius + radius, radius, Math.PI * 1, Math.PI * 1.55, false);
    }
    frameContext.stroke();
  }
})
.hover(
  function () { $(this).cSpinner("stop"); },
  function () { $(this).cSpinner("start"); }
);

$('#draggable').draggable();