Creating a basic loading progress bar animation with HTML5 Canvas

In the second example I am creating a very basic loading progress bar animating an arc.

Here I slowly move the progress from 0 to 100%, displaying an increasing arc and the number showing the percentage. The code and associated tutorial illustrates how to animate a HTML5 canvas animation using the browser built in function requestAnimationFrame. If this isnt present a fallback function is used for compatibility.

Example code and full tutorial

The full code is available by viewing the source of the below frame. If you want more detailed instructions there is my blog post I talk through the code step by step.