Uses CSS conic gradients

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:

1. There is nice article already by Jeremias Menichelli about creating progress rings using svg here
2. Use of CSS custom properties inspired from this talk by Lea Verou