Circular Loading Graphic

10th June 2015

I was working on a project that needed a circular loading graphic with a number in the center this on its own is not a difficult task however I needed to add some extra flare with the number counting up and also the circle animating round.

The bit that was a bit tricky was the animated circle as I needed it to be transparent and also scale easily if needed without having to re-create a load of styles, I eventually settled with a CSS border to achieve this.

The result can be seen below using some jQuery and velocity to animate the borders round to the correct positions. And the rest good old CSS this way I can easily scale the element and use it on different backgrounds.

See the Pen Circular Loading Graphic by Alan Parsons (@ParsonsProjects) on CodePen.

Category: CSS, jQuery Tags: , , , , |

Get in touch

Need some work done or just a friendly chat.