Note: This is a PDF/Print version of this article. Click here to view this content in your web browser
Pure CSS (scss) Bootstrap compatible circular progress bars
First off, credit where credit is due. I found a pretty good start to a circle progress bar by Alimul Al Razy via a random google search.
I rather liked the approach and made my own modifications, pairing down the animation and step generation into two For loops, and making use of data-attributes. You can see it on CodePen. It's quick and easy to style up and does not require bootstrap. $howManySteps controls how many levels of percentage needed, if you need increments of 5%, enter 20, increments of 2 would be 50, etc.
See the Pen Pure CSS (SCSS) Bootstrap compatible circular progress bars by Greg Gant (@fuzzywalrus) on CodePen.