Tips for adjusting the text color of the progress bar's final percentage display

Currently, I am utilizing the Progress bar component from Ant Design. However, I am facing an issue where the percentage text displayed at the end of the progress bar is not visible due to my black background color. This poses a challenge as there is no built-in API that allows for customizing the text color.

Below is the code snippet I am working with:

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

The Progress bar resides within a div, and simply changing the CSS color tag to a lighter shade has proven ineffective in addressing the visibility issue.

cssreactjsantd

Answer №1

To modify the text color, simply utilize the color attribute within the ant-progress-text class. For example:

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

If you prefer to only change the color of a specific progress bar, target it by referencing its parent class name (such as 

.parent-div-classname .ant-progress-text
).

Another option is to include a className property in the Progress component and assign a unique class for custom styling, allowing you to apply your color changes effortlessly.

Answer №2

Web Development

<div class = "loadingBar">
    <div class = "background">0%</div>
    <div class = "container">
        <div class = "foreground">0%</div>
    </div>
</div>
<button>Start</button>

Styling the Loading Bar

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

body {
    padding: 10px;
}

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

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

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

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

Adding Functionality with JavaScript

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choosing between setting a height of 100vh versus a minimum height of 100vh

In the development of my app, I noticed an interesting issue. When I set the background on the html with a height of 100vh and resize the viewport to cause vertical overflow, the background does not cover the overflowed content: html { height ...

htmlcss

The time update in React Js is not showing on Material UI's DatePicker

Utilizing the Material UI KeyboardDatePicker in my application has proven to be quite tricky. When I select a date, the initial selection displays both the date and time correctly. However, after waiting for 1-2 minutes and selecting another date, the date ...

javascriptreactjsdatepickermaterial-uidatetime-format

Unexpected behavior with overflow:scroll in the <body> tag

Take a look at this image and code snippet: <!doctype html> <html> <head> <style> body { border: 1px solid red; padding: 20px; overflow: scroll; ...

htmlcss

Using Rollup alongside Typescript to handle absolute imports for type declarations

In the process of creating a React component library, the project structure resembles the following: src/ components/ utils/ hooks/ Currently, there is an attempt to generate type files (.d.ts) using rollup. The types are successfully generated, ...

javascriptreactjstypescriptrollup

Troubleshooting Axios and Laravel: Solving the "Bad Request" Console Error

I am currently working with Laravel 5.8, React, and Axios. I have created a login page, but when the login fails, I receive a "bad request" error in the console. Even though I am getting the correct response from the server, the console shows an error rela ...

reactjslaravelaxios

How to effectively manipulate nested arrays in JavaScript without altering their references

Welcome everyone, I've been working on a project using next.js and I've encountered an issue with filtering posts. The filter function works perfectly when the posts are in a simple array like ObjChild. However, I have another section on my site ...

javascriptarraysreactjsnext.js

What is the true essence of a formatting context?

According to information sourced from MDN, a formatting context encompasses everything on a page, providing a defined area for laying out content in a specific manner. This leads to the question of what exactly is meant by the term "area" in this context. ...

css

I am experiencing an issue with Safari where there is an unexpected rounded border appearing that

Upon inspecting the image, a slight border is visible behind the main border on Chrome and Firefox. However, Safari and iPhone display a rounded thin border instead. Can you help us understand why this discrepancy is happening and how we can remove it? P ...

htmlcsssafari

Guide to creating a radio button with the appearance of a toggle button

Is there a way to style radio buttons like toggle buttons using only CSS and HTML? I want the group of radio buttons to have the appearance of toggle buttons, while still maintaining their functionality as radio buttons. UPDATE: I am open to simply makin ...

htmlcssradio-buttonradiobuttonlisttogglebutton

The parameter of type 'Element' cannot be assigned a value of type 'string'

For my latest project, I needed a section that could be resized by dragging one of the element's corner bars. After some research on Youtube, I stumbled upon "THE ART OF CODING" who demonstrated this feature using JavaScript without importing any pack ...

reactjstypescriptnext.js

What is the best way to set a single column to have a fixed position when scrolling horizontally?

There is an inline form that extends both horizontally and vertically. Within this form, there is a final column containing an add button which I would like to have a fixed position only when scrolling horizontally, not vertically. <!doctype html> &l ...

cssbootstrap-4

Modifying the URL of an image based on screen size with the @media property

Currently working on developing a responsive webpage. An interesting challenge is presenting two distinct images for the desktop and mobile views. Attempted to switch between images by utilizing the @media feature within CSS, as shown below. #login-top-s ...

htmlcssimageuser-interfaceresponsive-design

What is the best way to implement auto-refreshing with reactQuery?

Hey there! I'm currently working with a GraphQL API and I'm trying to automatically refetch data at regular intervals (e.g. every 3 seconds). I've been using React Query and have tried some workarounds like using setInterval, but it's n ...

javascriptreactjsreact-query

What steps can I take to successfully implement Tailwind CSS's max-w class?

After successfully using the proper class for setting max width in tailwind, it suddenly stopped working. I'm baffled by the fact that the max-w has refused to take effect. <section class="max-w-[80em]"></section> Previously, I ...

htmlcsstailwind-csswidth

Updating access tokens within a Google login component in React by utilizing django-allauth

I recently integrated Google Login into my web app which has a React front-end and Django backend. In the front end, I utilized the react-google-login package to manage all authentication processes, while on the backend, I implemented django-allauth with s ...

reactjsdjango-rest-frameworkjwtgoogle-oauthdjango-allauth

What could be preventing React from successfully uploading images to the server?

My current project involves using React and Express on the backend, with Multer handling uploads. While my server side functions correctly when testing with Postman, I am encountering unexpected results when trying to upload an image from React. Despite su ...

node.jsreactjsexpressaxiosmulter

The art of uploading images with HTML and CSS

Looking for guidance on how to convert this image bubble so that users can upload their images during account creation. When the user hovers over the image bubble, it should display "Upload profile image" and prompt them to upload an image upon clicking. A ...

htmlcssimage

Encountering a difficulty in decoding font from..." error while utilizing react-web-vector-icons in Gatsby

Struggling to implement the react-web-vector-icon library in a Gatsby site. Despite following all documentation for proper installation, importation, and requiring in the correct locations, only a box appears instead of the icon. Within my index.js file: ...

reactjsiconsgatsby

What is the most efficient method for managing window properties and child components in React/Redux?

My <Layout> component loads different child components based on the page. Some of these children may have tabs, while others may not. This variation in content affects how scrolling should work and consequently influences the structure of the scroll ...

javascriptreactjsreact-redux

Using multer for file upload causes React application to refresh

Important Update: The issue I am facing is related to hot-reloading in Creact React App. For more information, check out the following links: https://github.com/expressjs/multer/issues/566 https://github.com/facebook/create-react-app/issues/4095 I am del ...

node.jsreactjsexpressmulter