HTML5 Canvas loading spinner

Some time ago I was looking for an HTML5 spinner to include in my project CanvaMap.
I found some interesting tools such as CanvasLoader, but as usual I wanted to create a custom one. Something barebones, simple and lightweight.

So here is the code. The javascript part is the following:

It can be customized by playing with the initial variables as shown in the comments.
It uses an interval rather than a Timeout/AnimationFrame for simplicity, but it should be quite simple to make the switch.
The html part to run the script is:

The result – Fullscreen

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">