Progress Bar Color

Hi Laurent,

A dynamic progress bar in Glide is certainly possible. What are you trying to accomplish?

@Robert_Petitto @Laurent_Maleville @Jeff_Hager
i added a


embeded code to rich text component and it started leaving a huge space

@Glider Off topic from this post, but you can’t embed iframe code or JavaScript using rich text. As stated before html is not officially supported and can break at any time, but for the time being, some html does work.

sorry :wink:

1 Like

Hi Robert,
Yes, i make a dynamic progress bar. Thank you.
I just want find a new possibility for progress bar with different color for my students. Then, i could show them their progression,
May be will be a new request to progress bar component : a color with number…
See you!
Laurent

Well, here I show you my babies using some CSS code but harmless… they simulate the control of a machine.

I used the most basic and simplest code to avoid upcoming problems, something like this:

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

but the big and annoying problem is still adjusting the top position in screen. The PCs have a screen size/resolution, the phones other sizes, the vertical position has its parameters and the horizontal has its own life!!

Unfortunately I have a problem with my PC and software to record a video and show you how it looks in real time but in 2-3 days I think I will fix it if you can see it.

Saludos!

4 Likes

That looks lovely, sure hope your PC will get well soon :smile:

1 Like

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