Change progress color

[leonardoRocchini]

Hello, i have question there is a way to change te color of the progress value from className ?
In the following code, I can change the background color but not the value color.
<Progress value={value} className='bg-green-700'/>

[Alexjoshua14]

It seems like changing the color of the progress indicator directly through a className is not supported because the className you're applying is associated with the ProgressPrimitive.Root. To customize the color of the value indicator, you could modify the styles within the Progress component itself.

Here’s a quick solution I put together using an additional property to set the color of the progress indicator.

This enables Progress to be customized like:

[leonardoRocchini]

Thanks. Nice solution

[inj-src]

you can access the progress bar div with
<Progress className="bg-gray-200 [&>div]:bg-blue-500 [&>div]:rounded-full h-1.5" />

[IykeMich]

thank you so much