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 #2</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.5,
    scale: 5,
    segments: 13,
    outerRadius: 13,
  drawSegment: function (frameContext, calculateAlpha, segments, iteration, counter, minimumOpacity, settings, outerRadius) {
    var hue = Math.sin((iteration + 1) / segments * Math.PI) * 20 + 195,
        averageRadius = (outerRadius + settings.innerRadius) / 2;
    frameContext.fillStyle = "hsla(" + hue + ", 100%, 50%, 1)";
    frameContext.globalAlpha = calculateAlpha();
    frameContext.rotate(Math.PI * 2 / segments);
    frameContext.beginPath();
    frameContext.arc(0, 0, settings.innerRadius, Math.PI * 1.9 / segments, 0, true);
    frameContext.rotate(Math.PI * 0.8 / segments);
    frameContext.lineTo(averageRadius * 1.03, 0);
    frameContext.rotate(Math.PI * -0.8 / segments);
    frameContext.arc(0, 0, outerRadius, 0, Math.PI * 1.9 / segments, false);
    frameContext.rotate(Math.PI * 2.7 / segments);
    frameContext.lineTo(averageRadius * 1.03, 0);
    frameContext.rotate(Math.PI * -2.7 / segments);
    frameContext.fill();
    
  }
})
.hover(
  function () { $(this).cSpinner("stop"); },
  function () { $(this).cSpinner("start"); }
);

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