js spinner with angular version

This started off as a necessity. I needed to create a spinner that had a lot of control over its appearance. It would also have been good if there could be more than one version.

As it happened, that was not as difficult to achieve as I had initially thought.

A while ago, I played with rotating svgs. This is a simple enough thing when there is a primitive to work with such as a circle, so I started there, at this plunk.

This was a good starting point as there was already a good working script to nab for a different but very similar use. The trouble was, it was a bit boring, and spinners that are boring lend to bored viewers and browsers being pointed to other places. I decided to play with some of the svg stroke options and the results were better than I had expected.

The spinner also lent itself - with a small tweak - to a horizontal version, not too dissimilar to the Material Design progress bar, but with a lot more control.

I then decided to make it into an Angular1 directive, which can be found on GitHub, here. I might do an Angular2 version in TypeScript at some point.

Special thanks goes to Mark Keats who fixed a nasty - but obvious to him - bug with the javascript.