With conic gradient landing up in firefox 83. It will now have good support. Removing dependancy on SVG for some simple usecases progress ring is one of them.
Here is how I have achieved it with conic gradient, custom css properties and eight lines of javascript.
Check it out here
What more can we achieve with conic gradients:
You can create pie charts like this
or some awesome checkerboard background patterns like this
or something like this
or some fancy borders like these
or a hue color wheel
References:
- There is nice article already by Jeremias Menichelli about creating progress rings using svg here
- Use of CSS custom properties inspired from this talk by Lea Verou
Top comments (1)
Good