!function(){var e="canvas",f="opacity",k="fill",j=Math.PI,g="createElement",i="width",c="height",b="getContext",e="canvas",a="2d",h="rotate",d="translate";window.Spinner=function(A){if(!A){A={}}if(!A[e]){A[e]={}}if(!A.opacity){A.opacity={}}var z=document,t=z[g](e),m=t[b](a),r=z[g](e),x=r[b](a),l=A.iterations||8,y=A[e][i]||32,n=A[e][c]||32,s=A[e][k]||"#000",q=A.draw||function(C,D,B,F,E){C.beginPath();C.arc(0,-1*(B/3),D/10,0,6.283,0);C.closePath()},v=A.interval||33,w=A.rotation||3,o=(A[f].end||1)-(A[f].start||0),u=360/l;t[i]=y;t[c]=n;m[d](y/2,n/2);for(var p=0;p<l;p++){!function(){m[h]((j/180)*((A.clockwise?-1:1)*u));m.globalAlpha=o*((p+1)/l);q(m,y,n,l,p+1);m.fillStyle=s;m[k]()}()}r[i]=y;r[c]=n;x[d](y/2,n/2);this.interval=setInterval(function(){x.clearRect(-1*(y/2),-1*(n/2),y,n);x[h]((j/180)*(w+360));x.drawImage(t,0,0,y,n,-1*(y/2),-1*(n/2),y,n)},v);return r}}();document.body.appendChild(new Spinner);
!function(){
// help the compression along...
var __canvas = 'canvas', __opacity = 'opacity', __fill = 'fill',
__PI = Math.PI,
__createElement = 'createElement', __width = 'width', __height = 'height',
__getContext = 'getContext', __canvas = 'canvas', __2d = '2d', __rotate = 'rotate', __translate = 'translate';
/*
{
canvas:
{
width: 32, // width of spinner canvas
height: 32, // height of spinner canvas
fill: '#000' // fill color of shapes
},
opacity:
{
start: 0,
end: 1
},
iterations: 8, // number of shapes to draw
interval: 33, // ms between paint
rotate: 3, // pixels + (clockwise) or - (anticlockwise)
clockwise: false // direction of fade,
draw: function(context, width, height, iterations, iteration){
context.beginPath();
context.arc(0, -1 * (height / 3), width / 10, 0, 6.283, 0);
context.closePath();
}
}
*/
window.Spinner = function(options)
{
if (!options) options = {};
if (!options[__canvas]) options[__canvas] = {};
if (!options.opacity) options.opacity = {};
var ___document = document,
// source and destination canvas
sCanvas = ___document[__createElement](__canvas),
sContext = sCanvas[__getContext](__2d),
dCanvas = ___document[__createElement](__canvas),
dContext = dCanvas[__getContext](__2d),
// defaults
oIterations = options.iterations || 8,
oWidth = options[__canvas][__width] || 32,
oHeight = options[__canvas][__height] || 32,
oFill = options[__canvas][__fill] || '#000',
oDraw = options.draw || function(context, width, height, iterations, iteration){
context.beginPath();
context.arc(0, -1 * (height / 3), width / 10, 0, 6.283, 0);
context.closePath();
},
oInterval = options.interval || 33,
oRotation = options.rotation || 3,
// deltas
dOpacity = (options[__opacity].end || 1) - (options[__opacity].start || 0),
dAngle = 360 / oIterations;
sCanvas[__width] = oWidth;
sCanvas[__height] = oHeight;
sContext[__translate](oWidth / 2, oHeight / 2);
// for each iteration, rotate and draw shape
for (var i = 0; i < oIterations; i++)
{
!function(){
sContext[__rotate]((__PI / 180)*((options.clockwise ? -1 : 1) * dAngle));
sContext.globalAlpha = dOpacity * ((i + 1) / oIterations);
oDraw(sContext, oWidth, oHeight, oIterations, i + 1);
sContext.fillStyle = oFill;
sContext[__fill]();
}();
}
dCanvas[__width] = oWidth;
dCanvas[__height] = oHeight
dContext[__translate](oWidth / 2, oHeight / 2);
// for each tick, rotate source and redraw to destination
this.interval = setInterval(function(){
dContext.clearRect(-1 * (oWidth / 2), -1 * (oHeight / 2), oWidth, oHeight);
dContext[__rotate]((__PI / 180)*(oRotation + 360));
dContext.drawImage(sCanvas, 0, 0, oWidth, oHeight, -1 * (oWidth / 2), -1 * (oHeight / 2), oWidth, oHeight);
}, oInterval);
return dCanvas;
}
}();
