Outlining a circular element with CSS

Question

I have a circle which is created with the following styling:

.circle {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  -webkit-border-radius: 100%;
}

I would like to have an outline around this circle, however, I would like it to only be around part of the circle to produce a percentage.

For example:

• 50% will create an outline starting from 12 o'clock to 6 o'clock
• 25% will create an outline starting from 12 o'clock to 3 o'clock
• 66% will create an outline starting from 12 o'clock to 8 o'clock

As the width and height and defined, I could go about this by creating a circle in the same position which is slightly larger to create an outline, though I would not know how to create the 'pie' shape.

I would also like to be able to support as many browsers as possible.

Thanks in advance.

Answer 1

Basically, you use any library capable of generating a piechart, then you place a circle inside the pie chart matching your page's (or element's) background-color right on it so it looks like a donut (actually a donut chart is what you are looking for). Of course you use only two fragments for your application.

https://github.com/azagniotov/pielicious

Addon to http://raphaeljs.com/

Works flawlessly even on IE8.

I adapted this as a custom knockout.js binding in my current project. This is what the result looks like: