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
36 responses to “Circular Progress Loader Canvas JavaScript Programming Tutorial”
happy 420 😀
How can I change the font size of the centered text ?
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>
it will not display in my code why?
how to change the font size?
super video
Where did 4.72 come from? What is that even, pixles? How did you arrive at that number? Would it change if the canvas was bigger or smaller?
how can i change the text size?
how to fade out the loader
Feel like a kid watching your videos. Good times
how to change width and height of the circle
Is there any way I to create multiple loaders with different loading values on the same canvas?
In your progress sim function why are you multiplying Math.PI *2 by 10?
Thank u so much.This tutorial has become soooo handy today
how i make it big size??
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.
great tutorial.
HELLO, IF I WANT TO USE MORE THAN ONE WOULD LIKE PRELOAD. THANKS
what are APIs in js
get kind of confuse here.
needs some helps
Your are my great teacher !
Hi Adam, thanks for tutorial
I have a question
my problem is that I cannot change width and height of circle
you mean in the head <style></style> or .css external css file.
thank you.
sir please make a video on how to make organisation hierarchy chart in html
Adam, I think you mean "discretion" and not "disgression" at 2:25
Hi Adam, I been following your channel for a long time. I would like to see a tutorial about how to cache an image in javascript using the Image object.
Thank you!
Could you please contact me via email to discuss a project I'm working on in web development and design?
hey, can you maybe explain how to connect it with the Progress Bar tutorial? It doesnt worked for me
excellent video …..
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.
why my circle color is black ?
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.
Putting width and height for the canvas in the CSS solely is quite quirky in some browsers tho
how can i make process the bar when we hover it with image inside
Thanks for putting up these amazing tutorials! Any chance you'll do a series on integrating popular website API's like Google maps, Facebook, Twitter etc?
This guy is awesome. Really great tutorials for people who learned the basics of JS and need projects to learn how to use it.