Customize the progress bar

[henryruhs]

• [x] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
It would be great to customize the progress bar using CSS variables.

Describe the solution you'd like

Original

Custom

Additional context
CSS I'm using:

.progress-bar-wrap.progress-bar-wrap.progress-bar-wrap
{
    border-radius: var(--input-radius);
    height: 1.25rem;
    margin-top: 1rem;
    overflow: hidden;
    width: 70%;
}

Are you open for a pull request? Should be a easy first pick for me.

[abidlabs]

Thanks @henryruhs! Can you clarify the feature request here? Is it to change the styling of the Progress Bar altogether or is it to refactor the Progress Bar svelte css so that it uses Gradio's theme variables?

[henryruhs]

@abidlabs I was thinking to introduce Gradio theme variables. Should I use progress as variable prefix?

[abidlabs]

Hi @henryruhs it would be preferable to use the existing gradio theme variables and apply them to the Progress bar if we don't already do that. We're trying not to have component-specific theme variables because they are harder to maintain, especially as we work on releasing custom components.

I haven't taken a close look to see if we are already using the theme variables when styling the progress bar. If we are already doing that, then I think we should close this issue. If we are not applying theme variables to progress bar, that would be a much appreciated contribution!

[abidlabs]

Closing as this is now possible either via custom components, or via custom css. Not clear exactly what the author meant.