Clock-like thing when loading

You see this thing everywhere in OS X. I don't know how I call it, So let's call it "Spinning Clock".

You may do this with image files, But with canvas, You can try and apply different colors and sizes very easily.

1) canvas with ID, width, and height. It must be square.
2) Javascript library "SpinningClock.js" which I made.


Canvas should be set like below.



And this is SpinningClock.js.

In Javascript, Create SpinningClock first.



startColor is hex or rgb color for 12 o'clock line. It will be automatically created gradients with globalAlpha.
roundCap is boolean for lines has rounded lineCap or not.
The clock above is created like,



To start spinning、

To stop、

Basically that's it. Try it with the clock below. 40x40 square, startColor is #333333, roundCap is true.



The clock(canvas) must be 11x11(shown below) or larger. You can hardly recognize the clock 10x10 or smaller.


Unlike clocks in this page、By default, The clock will not be drawn until you call start()。And when you call stop(), The clock will be cleared and start-line will be reset.

If you want to draw the clock manually before start()、do like,
If you don't want to clear the clock after stop, set this before start(),

Here is dark background sample, startColor is #0000FF, roundCap is false. And appears/disappers normally.