# 1/4 circular progress bar for battery and steps

good morning everyone

I’m trying to design a 1/4 circular progress bar for battery and steps for my new project.
I took the following code for the battery: (#BLN#/660)
But with its background color, the whole circle is always colored! I’ll probably have to add a template.

The circular progress bar for “10K Step Goal” doesn’t work at all… I can’t even get the 1/4 semicircle right.

Can you help me?? Thanks in advance…

1 Like

1/4 circular progress would be: `(#BLN#/400)`

And if you don’t want background color, just set the BG Opacity to 0:

3 Likes

You can turn the opacity of the Progress Bar Background down to Zero. I was advised to use Arc Shapes for Arc Gauges and have never looked Back. You can make the backgroud exactly what you wish.
Here is an Inspectable. You will see one way of doing the Maths for a steps Quad Gauge . There are those wh can compose Neater Maths.

3 Likes

The formula for 10000 steps and only 1/4 of a circle is: `(clamp(#ZSC#, 0, 10000)/40000)`

3 Likes

You can make the progressbar with 0% opacity on background and put another layer with progress bar or arc shape with 0.25 fill ratio below it.

2 Likes
2 Likes

If I didn’t have you… Thank you for your help @petruuccios @russellcresser and @tom.vannes.
Now I’m a little further.

1 Like