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