Custom State color for Progress Indicator

Question

I am trying to customize the progress bar in one of my requirement.

I managed to bring in some custom colors using HTML. Like https://codepen.io/pmk/pen/emBErK

    <div class="progress aqua" data-width="0%">
    <div class="progress-text">0%</div>
    <div class="progress-bar">
        <div class="progress-text">0%</div>
    </div>
</div>
<br><br>

<div class="progress copper" data-width="0%">
    <div class="progress-text">0%</div>
    <div class="progress-bar">
        <div class="progress-text">0%</div>
    </div>
</div>
<br><br>

<div class="progress candy" data-width="0%">
    <div class="progress-text">0%</div>
    <div class="progress-bar">
        <div class="progress-text">0%</div>
    </div>
</div>
<br><br>

<div class="progress neon" data-width="0%">
    <div class="progress-text">0%</div>
    <div class="progress-bar">
        <div class="progress-text">0%</div>
    </div>
</div>
<br><br>

<div class="progress shine" data-width="0%">
    <div class="progress-text">0%</div>
    <div class="progress-bar">
        <div class="progress-text">0%</div>
    </div>
</div>
<br><br>

<div class="progress zigzag" data-width="0%">
    <div class="progress-text">0%</div>
    <div class="progress-bar">
        <div class="progress-text">0%</div>
    </div>
</div>
<br><br>

<div class="progress diamond" data-width="0%">
    <div class="progress-text">0%</div>
    <div class="progress-bar">
        <div class="progress-text">0%</div>
    </div>
</div>
<br><br>

<div class="progress hearts" data-width="0%">
    <div class="progress-text">0%</div>
    <div class="progress-bar">
        <div class="progress-text">0%</div>
    </div>
</div>
<br><br>

<div class="progress sparkle" data-width="0%">
    <div class="progress-text">0%</div>
    <div class="progress-bar">
        <div class="progress-text">0%</div>
    </div>
</div>
<br><br>

<div class="progress test" data-width="0%">
    <div class="progress-text">0%</div>
    <div class="progress-bar">
        <div class="progress-text">0%</div>
    </div>
</div>
<br><br>
<input id="slider" type="range" name="slider" min="0" max="100" value="0">
<button class="test" data-val="0%">0%</button>
<button class="test" data-val="10%">10%</button>
<button class="test" data-val="40%">40%</button>
<button class="test" data-val="50%">50%</button>
<button class="test" data-val="60%">60%</button>
<button class="test" data-val="100%">100%</button>

    <h2>Like it? - Check out my other <a href="https://codepen.io/pmk/popular/">Pens</a></h2>

But in 1 part, I need to change the state color for sap.m.ProgressIndicator

Even I have changed the background Color using CSS but I am unable to change the color which is getting filled inside progress (the state value).

Just curious to know if it is possible by any chance?

Best Regards, Sourav