I am developing a screen using student progress, for example, it has 10 activities to complete, and it is in activity 2, so this represents 20% of the total activity.
I would like to represent this through a circle, a button for the next exercise, something like this:
As I click next, the progress bar moves to the right to complete the circle, and the number goes up from 1/7 to 2/7.
I would like it done with CSS and javascript, or something. I do not want it to be done in SVG.
When I needed to use a counter, I used the Circliful . It is a jQuery plugin very easy to use and customize, it has 20 attributes to change if you want and it works very well.
The only difficulty I found in it was that every time I wanted to change the quantity inside the circle (from 1 to 2 for example as you said it), you need to empty the div that contains the circliful element and regenerate with the new number. Half gambiarra but it works.
$("#test-circle5").circliful({
animationStep: 5,
foregroundBorderWidth: 5,
backgroundBorderWidth: 15,
percent: 80,
halfCircle: 1,
});
An example of usage.