text inside the Linear progress bar

Hello,

how to insert the value inside the linear progress bar. just like the image below

thanks

Hello Abdullah,

Thank you for posting in our community.

I have been looking into your question and to insert the text in the igx-linear-bar component and change it to look like the one in the picture, you need to style it. To do this you can style the linear progress bar and its text in the style.scss file by selecting it with the .igx-linear-bar__base class and making it bigger by overriding its height.

Text can be styled by selecting it with the .igx-linear-bar__value class and setting its placement, position and offset, like the following:

.igx-linear-bar__base{
    height: 1.25rem;
}

.igx-linear-bar__value{
    align-self: center;
    position: absolute;
    top: -0.20rem;
}

In addition, I have prepared a small sample illustrating my suggestion which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

Hello Abdullah,

Additionally, I would like to let you know that due to a national holiday I will be out of the office on 09/06/2022 and I will review any updates on 09/07/2022 and respond to you then.  

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics