What’s the best way to create this CSS shape?

[ericcarl]

I’m working on an application where people will be taking online classes and receiving grades for their homework. I’d like to create a visual element that shows them the grade they received on an assignment. Here’s an example of what I’d like to do:

It’s a radial meter with an outer ring that is filled to an amount that represents the grade they received, with a number in the middle. I’m not sure what would be the best way to set up the ring. After looking at the CSS-Tricks “The Shapes of CSS” article (https://css-tricks.com/examples/ShapesOfCSS/) it seems like I could probably do it entirely with CSS, but I’m not sure how. I’d love to have it set up so that the amount of the ring that’s filled is tied to just one CSS value, as it seems like that would be easier from a development side. I was also considering using SVG but I’m not sure if that would be any easier. Any ideas on this? Thanks!

[Mottie]

Not a css solution, but check out knob.

[ericcarl]

Wow, look at that! Spot on. Thanks Mottie, I’ll send it over to our developer, I imagine we could work with it. Awesome!

[Author]

Posts