Skip to content

Instantly share code, notes, and snippets.

@davidjmerritt

davidjmerritt/circle_prog.html

Created May 16, 2017 03:18
Show Gist options
  • Save davidjmerritt/14cf0a4d6a4badd6ae0f069a200196cc to your computer and use it in GitHub Desktop.
Save davidjmerritt/14cf0a4d6a4badd6ae0f069a200196cc to your computer and use it in GitHub Desktop.
Download ZIP
Multi-state circular progress loader
Raw
circle_prog.html
<html>
<head>
<style>
#my_canvas {
border:3px solid #333;
background-color: rgb(39, 93, 140);
border-radius: 250px;
width:25;
webkit-filter: grayscale(1);
}
</style>
</head>
<html>
<body onload="progressInit()">
<canvas id="my_canvas" width="50" height="50"></canvas>
<script>
var ctx = document.getElementById('my_canvas').getContext('2d');
var al = 0;
var start = 4.72;
var cw = ctx.canvas.width;
var ch = ctx.canvas.height;
var diff;
var pause;
var sim2;
var toggle;
var bg_color;
function progressInit(){
al = 0;
diff = 0;
}
function progressSim() {
diff = ((al / 100) * Math.PI*2*10).toFixed(2);
progressAnime(diff,'rgb(1, 0, 93)');
if (al >= 100) {
if (toggle == 0) { toggle += 1 } else { toggle = 0; }
clearTimeout(sim);
clearTimeout(sim2);
pause = setInterval(doSomething, 1000);
}
al++;
console.log(toggle);
}
function doSomething() {
clearTimeout(pause);
progressInit();
if (toggle == 0) { bg_color = 'blue'; } else { bg_color = 'red'; }
document.getElementById('my_canvas').style.backgroundColor = bg_color;
if (toggle == 0) { sim2 = setInterval(progressSim, 5);} else { sim = setInterval(progressSim, 10); }
toggle = 0;
}
function progressAnime(diff,ss) {
ctx.clearRect(0,0,cw,ch);
ctx.lineWidth = 28;
// ctx.lineWidth = 1;
ctx.fillStyle = 'black';
ctx.strokeStyle = ss;
ctx.textAlign = 'center';
// ctx.fillText(al+'%', cw*.5, ch*.5+2, cw);
ctx.beginPath();
ctx.arc(25,25,14,start,diff/10+start,false);
ctx.stroke();
}
var sim = setInterval(progressSim, 10);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment