D4mations.com

Circular Progress Loader Canvas JavaScript Programming Tutorial



Lesson Code: http://www.developphp.com/video/JavaScript/Circular-Progress-Loader-Canvas-JavaScript-Programming-Tutorial
Learn to program round circular file upload progress bar animations using JavaScript and the HTML5 Canvas element.

Original source

d4mer

, , , , , , , , , , , , , , , , , , , , ,

36 responses to “Circular Progress Loader Canvas JavaScript Programming Tutorial”

  3. i have copied same program but im not getting circular progress bar.. kindly check the code and let me where should i change thank you..

    <!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);
    }
    al++;
    }
    var sim = setInterval(progreeSim, 50);
    </script>
    </body>
    </html>

  16. and how do i adapt this Circular Progress Loader Canvas to a submit() function that i have already defined? i mean how can i adapt this progress canvas so that when my function starts the progress canvas also starts and as soon as the function ends my progress canvas also ends.

  30. Love your tutorials but I can't figure out how to link this to your file uploadeder. watched both videos 10 time and can't figure it out. Sorry if its simple to everyone else but I'm lost and tried everything, would love some help.

  32. I have two <canvas> elements, each with different id attribute. The js code is the same as yours, but with different value for procent variable. Do you know why the php page can't render both <canvas> elements? It just displays one of them, and if, fe, I set the procent variable to 50, it doesn't stop at 50, but it never stops.

Leave a Reply