loading animation

two arcs, one for "doing something" the other for percentage loaded

by rob Davis

HTML

<div>
    <canvas id="loader"></canvas>
</div>

CSS

body {background-color:red}
#loader    {position:absolute; top:0px; left:0px; }

JavaScript

var fps=24;
var canvas = document.getElementById('loader');
var context = canvas.getContext('2d');
var percentage = 0.0;
var width=400;
var height=400;
var innerStartAngle = 0;
setCanvasSize(canvas, width, height);
setInterval(frameStep, 1000/fps);

   for (i=0;i<4;i++){
      for(j=0;j<3;j++){
        context.beginPath();
        var x          = 25+j*50;               // x coordinate
        var y          = 25+i*50;               // y coordinate
        var radius     = 20;                    // Arc radius
        var startAngle = 0;                     // Starting point on circle
        var endAngle   = Math.PI+(Math.PI*j)/2; // End point on circle
        var clockwise  = i%2==0 ? false : true; // clockwise or anticlockwise
    
        context.arc(x,y,radius,startAngle,endAngle, clockwise);
        context.lineWidth = 15;
        if (i>1){
          context.fill();
        } else {
          context.stroke();
        }
      }
    }



function frameStep() {
    percentage+=0.1;
    if (percentage<100)
        updateLoader(percentage);
}

function updateLoader(perc) {
    var x = 200;
    var y = 200;
    var radius = 30;
    var startAngle = 0;
    var endDeg = 360*(perc/100);
    //console.log(perc, endDeg, (perc/100));
    var endAngle   = deg2Rad(360-endDeg);
    var clockwise  = true;
    // reseting the size clears the canvas
    setCanvasSize(canvas, width, height)
    context.save();
    context.beginPath();
    context.arc(x, y,radius,startAngle,endAngle, clockwise);
    context.lineWidth = 15;
    context.strokeStyle = '#ff0';
    context.stroke();
    context.restore();
    context.save();
    context.beginPath();
    innerStartAngle+=10;
    context.arc(x, y,radius-18,deg2Rad(innerStartAngle),deg2Rad(innerStartAngle+260), clockwise);
    context.lineWidth = 12;
    context.strokeStyle = '#0ff';
    context.stroke();
    context.restore();

}


	function deg2Rad(degrees) {
		return degrees * Math.PI / 180;
	};


function setCanvasSize(canvas,...