CSS: How to create a circle progress bar

Wappler General Need Help
1

Hi,
I would like to create a circle progress bar like I found in the following snippet, but I can‘t find out how to make it dynamic with Wappler.

Did someone in the community try this already?

I need to make this number dynamic : data-percentage=“20”

1 Like
2

I haven’t tried it but you could include the CSS and JS from these pens and set the data-percentage as:

dmx-bind:data-percentage="somevariable.value"

where you could change somevariable.value to any variable/server connect value you want

3 Likes
3

Thanks for your help. Sadly it does not work. This is what I get:

image

4

It does work! My mistake was, that it does not work with decimals.

image

3 Likes