circle-progress | Animated circular progress bars | Menu library

I have this line of code in almost every component file where I have subscribe to an observable returning from singleton service file.

destroy$ : Subject = new Subject()

I have two circle svg on a page which should dynamically change it's stroke-dasharray based on the data passed in. However, the first value passed to the dash-array affects the subsequent ones.

For example If I pass 2 to the first and 4 to the second stroke-dasharray respectively, I expect them to have different strokes on the page, But they kept having the same strokes based on the first value passed.

Here is the codepen example

For each .round div, there is a data-value(%) which is static at the moment, but eventually going to be dynamic. Trying to call it in my JS for if data-value <= 0.50 display the bar as red, if data-value >0.50 && data-value <=0.75 display the bar as yellow and if data-value > 0.75 display it as green to call that value and wrap the Circle function in a conditional, how would I go about that?

I tried the following and it told Cannot read property 'getAttribute' of null: I tried this.getAttribute('data-value');

This is the JS with the above "solution" but doesn't populate anything:

I got this problem:

[Vue warn]: Error in mounted hook: "TypeError: element.circleProgress is not a function"

old vuetify plugins not showing, but new vuetify plugins appear.v-checkbox as an example. can you help me

v-checkbox is not visible

I am creating a progress circle bar to use as a timer along with sliders, where each slide will have its own bar

I could achieve it, however I couldn't synchronize the bars with themselves.

This is what is happening:

As you see it is not working properly. I need the bar to fill 100% of the circle, then proceed to the next dot and repeat the process, however I couldn't synchronize them.

If I only have one dot it seems to work fine, though:

I am using two setTimeout, one to decrease the property stroke-dashoffset of circle through the controll of percentage, this one makes the bar to be filled; the second setTimeout is precisely to make the circle appears around the following dot. I have the variable timer which controls the interval of the changes and it is in the second setTimeout. I believe the problem may lie on the time between the two setTimeout, but it is just a guess.

I am working with hooks, however I couldn't make it work that way on Codepen, because of that I created a codepen with a class component, but it is even worse, I don't know why, since it follows the same logics.

https://codepen.io/WegisSilveira/pen/poyPVWq

At any rate, here is my code with hooks. The css is the same as the one on codepen:

For production build i am using ng build --prod command but getting this error

package.json

I am trying to implement an circular progress bar with animation and came across the plugin from the below resource.

I downloaded and included the plugin and used the source code (HTML and JS) from the demo page and with this it works.
However, my problem is that the animated texts, i.e. the values that are generated through JS (from 0 until the set percentage) appear right from the circles / charts instead of inside them (like in the demo).

I am assuming I am missing some CSS here but I am not sure what I need to add to move the values inside the circles / charts. The CSS from the source code has a comment saying that it is not required here.
Can someone please help me with this ?

References:

• https://www.jqueryscript.net/other/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress.html
• https://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/

HTML: