How to change the text color for the percentage shown at the end of the progress bar-CodePudding

I'm using the Progress bar by Ant Design and I want to change the text color for the percentage shwon in the end of the progress bar as my background color is black so it's not possible to see the percentage shown(which is in black color). I have no idea how to change it as there's no API to change the text color.

Here's my line of code:

 <Progress strokeColor={{'0%': '#eb5c20','100%': '#c6224e'}} percent={90} status='active' />

This progress bar is inside a div and even if I change the css color tag to a lighter color it won't do the job too.

CodePudding user response：

You should change the text color using the color property on the ant-progress-text class. For instance, you could do:

.ant-progress-text {
  color: white;
}

You might not want to change the color of all progress bars globally, which you can achieve by referring to that specific progress bar using its parent class name (something like .parent-div-classname .ant-progress-text).

Alternatively, you can add a className property on the Progress component to assign a custom class to it, and use that to apply your color css property.

CodePudding user response：

HTML

<div class = "progressBar">
    <div class = "background">0%</div>
    <div class = "container">
        <div class = "foreground">0%</div>
    </div>
</div>
<button>Play</button>

CSS

*:not(button) {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    padding: 10px;
}

.progressBar {
    width: 150px;
    height: 15px;
    border: 1px solid #000;
    position: relative;
    margin-bottom: 5px;
}

.progressBar .background,
.progressBar .foreground {
    width: 150px;
    height: 13px;
    font: normal 10px/13px Sans-Serif;
    text-align: center;
}

.progressBar .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    overflow: hidden;
}

.progressBar .foreground {
    background-color: navy;
    color: yellow;
}

$(function() {
    $("button").click(function() {
        var start = 0;
        var interval = setInterval(function() {
            if(start >= 100) clearInterval(interval);
            $(".progressBar").find(".background, .foreground")
                             .text(start   "%")
                             .end()
                             .find(".container")
                             .css("width", start     "%");
        }, 10);    
    });
});