$(document).ready(function(){setTimeout(buildSpinner({x:50,y:50,size:20,degrees:30}),2000);function buildSpinner(options){var width=32,height=32,lineOuterWidth=8,lineInnerWidth=4;var canvas=document.createElement('canvas')
$(canvas).css({'position':'relative','top':'25px','left':'25px','opacity':'.75'});canvas.height=height;canvas.width=width;$('.slideshow').append(canvas);var ctx=canvas.getContext("2d")
var degrees=0;var lastDegrees=0;var animationTime=2000;var startTime,currentTime,elapsedTime;setInterval(draw,1000/30);function draw(){currentTime=new Date().getTime();if(startTime==null){startTime=currentTime;}
elapsedTime=currentTime- startTime;var percentage=elapsedTime/animationTime
lastDegrees=degrees;degrees=parseInt(360*percentage);if(elapsedTime>=animationTime){startTime=currentTime}
ctx.clearRect(0,0,width,height);drawBackground();drawPercentage();function drawPercentage(){ctx.beginPath();ctx.strokeStyle='rgb(255,255,255)';ctx.lineWidth=parseInt(lineInnerWidth);ctx.beginPath();var s=(Math.PI/180)*(0);var e=(Math.PI/180)*(degrees);ctx.arc(width/2,height/2,(width/2)-(lineOuterWidth/2)-1,s,e,false);ctx.stroke();}
function drawBackground(){ctx.beginPath();ctx.strokeStyle='rgb(0,0,0)';ctx.lineWidth=lineOuterWidth;ctx.beginPath();var s=(Math.PI/180)*(0);var e=(Math.PI/180)*(360);ctx.arc(width/2,height/2,(width/2)-(lineOuterWidth/2)-1,s,e,false);ctx.stroke();}}}});