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.