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

user_17210190 0
Viewed 248

I'm using the Progress bar by Ant Design and I want to change the text color for the percentage shown at the end of the progress bar as my background color is black so it's not possible to see the percentage is 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.

antd reactjs css
2 Answers

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.

user_168877770

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;
}

JS

$(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);    
    });
});

user_145618310
Related