进度指示器的自定义状态颜色

时间:2017-11-29 14:28:04

标签: css progress-bar sapui5 progress-indicator

我正在尝试根据我的要求自定义进度条。

我设法使用HTML引入了一些自定义颜色。喜欢 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>

但在一部分中,我需要更改sap.m.ProgressIndicator的状态颜色

即使我已经使用CSS更改了背景颜色,但我无法更改内部进度填充的颜色(状态值)。

只是好奇地想知道这是否有可能?

最诚挚的问候, Sourav

0 个答案:

没有答案