Radial Progress Indicator in CSS

So I had to show a progress indicator for an online questionaire and I also wanted it to look really nice.

Around the web you will find many different approaches so it can be a bit of a job to just sort through it all. In the end I settled on a CSS based approach with some javascript to set it up. Compared to the pure javascript approaches this has the benefit of nicely antialiased and resolution independent rendering across browsers. This means that even for never devices with retina screens but a pixelwise half size virtual screen – this will look as sharp as possible without any work on my part :)

There is a downside of course and it is that the technique uses the CSS3 rotate transform which is only supported on newer browsers. So if you have to allow for those with old IE versions to use the site you should probably look elsewhere.

I have based the code on an older pie graph timer example which is in turn based on an even older pie graph tutorial. In my case I wanted the progress indicator to not be a pie but actually a ring and also I wanted that ring to have a background-color that I could set. Having the background-color settable was not part of the examples I found so I have modified it to allow for that. Also I have modified it to work nicely with Twitter Bootstrap 3 – there was some problems due to the border box box-sizing applied everywhere by default in Bootstrap 3. In the spirit of sharing I am providing the code for you to download and improve upon.

In case you are wondering what it looks like you can have a look at the Signs Of Dyslexia Test that originated this work (just start answering the questions to see the progress indicator in action) or here is a screenshot:

css radial progress indicator

 

You can download the code here.

Leave a Comment