Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Circular Progress Loader Canvas JavaScript Programming Tutorial

Published :
Author :
Adam Khoury

Learn to program round circular progress bar animations for file upload forms using JavaScript and the HTML5 Canvas element.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <canvas id="my_canvas" width="70" height="70" style="border:1px dashed #CCC;"></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; function progressSim(){ diff = ((al / 100) * Math.PI*2*10).toFixed(2); ctx.clearRect(0, 0, cw, ch); ctx.lineWidth = 10; ctx.fillStyle = '#09F'; ctx.strokeStyle = "#09F"; ctx.textAlign = 'center'; ctx.fillText(al+'%', cw*.5, ch*.5+2, cw); ctx.beginPath(); ctx.arc(35, 35, 30, start, diff/10+start, false); ctx.stroke(); if(al >= 100){ clearTimeout(sim); // Add scripting here that will run when progress completes } al++; } var sim = setInterval(progressSim, 50); </script> </body> </html>