So I had to show a progress indicator for an online questionaire and I also wanted it to look really nice.
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:
You can download the code here.