How to change progress bar's value color?

Adobe XD UXP Plugin API
, ,
1

I tried the following code, but I could not change the color of the progress bar placed in the dialog. The color of the progress bar’s value is gray.
progress[value]::-webkit-progress-bar {background-color: #00f;}

1 Like
2

Hi @Raphael-D –

The built-in progress bar appearance can’t be overridden. If you want a different L&F, you can build your own easily, though. Something like:

<div class="progress" style="background-color: #888; height: 8px; width: 100%; border-radius: 4px; overflow: hidden;">
    <div class="value" style="width: 50%; background-color: #FC4; height: 8px;"/>
</div>

Which looks like this:

image

4 Likes
3

Hi, @kerrishotts
Thanks to you, I solved it.