Progress bar with colours

Is there a possibility to make progress bar starting one color and ends up with different color. Like mix colors bar.
Instead of adding 10% extra on each images to make it longer with different color?
It would be nicer… than having images with different progress bars colors. I guess.
I hope you understood what i meant.

its not related to a date testing. Just a general question might implemented for battery function or something else.

Thank you

Read the link i shared, to learn how to use masking.

For your case u need a rectangle image that covers your progress bar (when the bar is at 100%)

This image can be gradient or have equally divided colors. Then use it as a mask. When the progress bar moves across the mask it will show the different colors

Thank you for your answer.
I have used it once before the same way you just mentioned it. But i thought it would nice if Samsung has that tool for having multiple colors choices instead of making it outside the app and bringing in to the app.
It would be a nice feature for designers.
Ok, np.
Thank you

Hi , try your luck in adding your comment here

As a new feature request

@lebanoncedars actually there is another crude method which u could try. All done within wfs.

E.g create 10 rectangle using rect element
Align them adjencent to each other. Every one is different color.

Then use tag expressions on each rect.


Sudo code for now;

Rect 1 ) if percent >= 10 then opacity = 100% else 0%
Rect 2) if percent >= 20 then opacity = 100% else 0%

And so on

Or you could play with tag expression on the width of each rect.


Or rect starts with width = 0

Rect 1) if (percent < 10) do percent * Xpx
Else 10 * Xpx

Rect 2 ) if ((percent > 10 ) and (percent <=20)) then
(Percent - 10) * Xpx else 20 * Xpx

And so on

1 Like

Thank you for the reply.
Well the easiest way i guess. Would be in this case, just create a foggy colors outside the app as an image and mask it to the progress bar or anything u want, instead of creating 10 colors squares. Or jump from one color to next color. ( the JUMP) its not a professional idea… sorry… i like it smoother… better i guess.
Idk… i think its faster way.
Thank you

1 Like

You can make it smoother with my 2nd formula
Infect smoother then normal progress bar.

But longer tag expressions formula and complex

My second formula slower increase the lenght of rect until it hits the max lenght of one rect

Then proceed to increase next rec

I will give a try on it anyways… thank you so much.
Appreciated a lot

thnx Knightwing

the only tag I can find in the Angle section… is that the right place?
or where do you implement the code?
Thank you.

In dimensions w / h there should be a tag

i realise the min px is 1 px
so you also got to write code in the opacity tag.

think is easier to use the mask, though with this method you can do more when mask is not able to do. It will base on your creativity

To make the color of a bar smoothly interleave for example from green trough yellow to red, you can stack 3 duplicate layers (red, yellow, green) and set their opacity to continuously fade with lowering battery charge.
For example
-bottom layer: Yellow, opacity 100, background opacity 25%

-middle layer: Red, opacity 100-2*[BATT_PER], bgr. 25%


-top layer: Green, opacity 0+2*[BATT_PER]-100, bgr. 25%



thank you so much Knighting, I will give a try…
let u know…
thnx again.

Oh My God :scream:, this is really looks nice… thnx Peter… so much…
I will give a try on this solution… see what’s like…
hopefully it works…
thnx again buddy.

sorry, I tried it , but nothing will work when it comes to linear progress.
if u don’t have a detailed explanation, I cannot do it… even with the code…
I got so much frustrated…
thnx anyways

Try following peter method, bro we cant be spoon fooding you all the way. Example with tag expression has been given to u…either explore simple task first like use tag expressions on on the editable properties, e.g dimensions like in my screenshot
Simple tanary formula, go read guides . Eg how to make a and, or aquation first. Understand how do basic stuff first.

P.s each element, complication on wfs are layered.
So each time u add something its a layer. Which u can order to be behind or infront. So peter means 3 image aligned according and each of the image u use the expression he gave u.

Tag expression documentation for your ref

I mean 3 progress bar layers. Make first progress bar the size, shape and position you want, then right click it on the layers list in the left side of the WFS window to make duplicate and another duplicate and then adjust the color and opacity settings as I stated above.


@lebanoncedars i think @Peter method will work better anyways

1 Like

Well Done Guys . I have Bookmarked this . Thanks @Peter thanks @Knightwing .

BTW Peter @Peter over here BAT = BATT . I have been at it for 20 Minutes . I thought there was something wrong with my Copy and Paste Technique . Thank again . Show you the results in a minute.
I am actually going to use the EV Charging Icon for the Steps goal . But I got a good test off with your nice little code Example . I know there are many ways with masks an styles and time line s to do stuff on here . But if I can do it with a Tag and some of Peters Perfectly Descriptive Maths I will .Thanks again . It is always a pleasure to meet you where ever I find you .

1 Like

@peter seem to be our resident mathematician :wink:

1 Like