Member-only story
Building Your Own JavaScript Circle Progress Bar
And how to include it in Angular, React, Svelte, or Vue apps

Recently, I’ve been asked to create circle progress bars. First, it was about tracking the progress of the implementation of a new design. Then, about creating a bare new component indicating completion list status.
I didn’t want to give a chance to laziness and try on my own. I was already aware of the tip using conic-gradient
with only CSS and I wanted to give it a try.
My goal was also to get rid of the use of a third-party library which could increase the size of the output bundle and make the options more restrictive.
Thus, in this article, you will learn how to implement a Circle Progress Bar on your own in 2 different ways:
- The first approach will use pure CSS with
conic-gradient
function, - The second one will make use of SVG and CSS.
In the final part, you’ll see how to integrate such charts in projects using the JavaScript Frameworks…