Gradient battery progress bar tutorial

[Charlie Design - Gradient battery demo - watch face for Apple Watch, Samsung Gear S3, Huawei Watch, and more - Facer]

I wanted to post a tutorial on how to create a gradient battery progress bar or pair of bars. Inspector mode is enabled on my design. The example is for a horizontal bar but making a vertical bar uses the same procedures.

When making your bar, first grab a multi color gradient of your choice and add it as an image. Place it where you want and use the width setting to set the length of your bar and the height setting for the bar thickness. If using two bars create a rectangular block between as in my example.

Next make a rectangle (“battery progress watch” and/or “battery progress phone” in my example) a little higher than your visible bar and wider than your gradient image. Use a different color than your background as a start so you can see it and set the opacity to 50%. Now place the rectangle to the far right of your image with the left side of the rectangle at the 100% mark. Make a note of the X setting.
In my example the X setting is 245 (click on “demo 100% position”). Next move that rectangle to place the left side where it lines up with the 0% position and make a note of this X setting. In my example the X setting is 75 (click on the “demo 0% position”). These demos are turned off so you don’t see them and only there to demonstrate how you arrive at a moving X formula.

Next subtract the 0% number from the 100% number, in my example 245 - 75. Take the result (170) and divide by 100. The result is 1.7.

Now place the following code into the X setting of your rectangle:

This is the 0% X setting + (watch or phone code x the 1.7 figure)

Set the color of the progress rectangle to match your background and set the opacity to 70% or tweak it to your liking to shade out the used amount battery level.

Please let me know if anything is unclear.


Very nice. I shall be inspecting this soon.
I had fading colour nailed (undecided on exact expressions whether to use clamp ot not as it didn’t matter in context so watch doesn’t use it but phone does) but here’s my template for reference:

A gradient version would be excellent. I look forward to delving in to your tutorial

Also, if you link your watchface here with only the face ID it gives a preview so I just pasted on a new line.


That’s brilliant @thomasfmal well done for helping everyone to learn these skills :+1:


Its all good, every tutorial is welcome.
But for those who came for the gradient it self, here you are:


Thanks for adding that, I didn’t think to do it…!


I made MAG 1503 using a graphic that looked just like that.