Progress Bar Color

I wonder if using some CSS you could target a specific progress bar to change the color of just one component.

1 Like

Bravo :clap: :clap: :clap:

Yes @Robert_Petitto, you can.

Put this code in a Rich Text component:

<div style ="position: fixed;
top: 32%;
width: 65%;
height: 2%;
opacity: 1.9;
left: 20%;;
background-color: white; 
border-radius: 10px; 
border: 2px solid #ffffff;">

<div style ="position: fixed;
top: 32%;
width: 45%;
height: 2%;
opacity: 1.9;
left: 20%;;
background-color: red; 
border-radius: 10px; 
border: 2px solid #ffffff;">

and later, test it by changing the red bar’s width value manually (from 1 to 65%)

The problem here is you can do it only when position= fixed otherwise, you must use a 2nd component to get the visual effect.

Saludos!

1 Like

@ThinhDinh and @Laurent_Maleville

here you can see my custom progress bars working using basic CSS code

I hope Glide can give us this feature in a native way soon.

Saludos!

5 Likes

please give me the code

the code is above @Glider, put the code in a Rich Text component and adjust the bar’s width/height setting (later you can use a template and modify the values automatically).

Saludos

the one in the picture is different can i have the code o that one

Hello!
You are a GENIUS!
I will try to make this like you, it’s awesome!!
Thanks a lot!
See you next
Laurent

2 Likes

When i try, i have this

me too

use a dark background on your APP to see bars better @Laurent_Maleville

Esto también te puede servir para otras cosas @SantiagoPerez

1 Like

Ok, I use a dark background
Then, i have this :

So, i try to understand your work. You give me a code with a bar fixed. Now, i would like to make a dynamic progress bar like.
Do you create a relation between the rich text and a number entry maybe.
I see in your app like if the dynamic progress bar is manipulated by a “number entry” component.
Thanks for your work and your sharing!
I progress with you (like a progress bar :smiley: )

1 Like

Check this out:

Separate Red and Pink Progress bars! Very specific CSS to your app. Mine was:

<span><style> div:nth-child(3) .iCpUZF {background-color:red}</span></style> 

child(3) because the progress bar that I wanted to change was the 3rd component from the top

5 Likes

Hello @gvalero,
Can you share your app with different progress bar because i want to know how you are make it?
Thanks a lot
Laurent

Sure @Laurent_Maleville but give me some time.

I use it as an internal APP where I carry out tests and it’s a little disaster of course.

I’m going to replicate all this in a new test app and erase many useless settings and data to help to understand it better.

I will notify you!

Saludos

1 Like

@gvalero
Thanks a lot!
See you next!
Laurent

1 Like

Hello Robert!
Thanks a lot for your help!
This is awesome!
Laurent

1 Like

Oh!!! Ya me estoy haciendo ideas de donde y cómo puedo usarlos.

Hello @gvalero,
Do you have the time to explain me what are you making the progress bar dynamic?
Thanks!
Laurent

Hi @Robert_Petitto , could I take a look at this Pokemon app? I’m really curious about the battle system, I was planning to do something similar, but more like an RPG, and get stuck on battles, more specifically on how to generate an AI response from my turn. I thought in a bunch of options that will trigger randomly, but I would like to see an pro app like yours to take some ideas.

Thanks in advice :pray:t2: