Allow progress status text to be centered with the full width of the bar

[abdatta]

Issue type

I'm submitting a ... (check one with "x")

• [ ] bug report
• [x] feature request

Issue description

Current behavior: Currently, the progress text only appears centered with the filled part. As a result, if the progress is very small, the progress text is not completely visible, as shown below:

Expected behavior: I would like to have an options to allow centering the text with the full width of the bar. So, the expected behaviour will be an option to allow this: Note how part of the status text is differently coloured depending upon if it is overlapping with the filled part. This feature will be really helpful. If you want, I can help implement this as well. Please let me how you all think of this.

[Dealman]

Yikes, 2 years and no further mention of this. The lack of a proper slider component and this behaviour of the progress bar makes it look ridiculous.

This is the least user friendly progress bar I think I've seen, it makes no sense for the text to follow the value of the progress from neither a UX nor UI perspective.

[ridweng]

For people like me that came to ask if there was a solution but there was none, I made a trick that can be modified to suit different necessities.

HTML:

<div class="progress-container">
                <nb-progress-bar [value]="value" [status]="status" [displayValue]="false"></nb-progress-bar>
                <div class="overlay">{{ statusCam[camera.id] }}%</div>
 </div>

CSS:

 nb-progress-bar {
    flex: 1;
  }

  nb-progress-bar ~ nb-progress-bar {
    margin-top: 1rem;
  }

  .progress-container {
    position: relative;
  }

  .overlay {
    transform: translate(35%, -100%);
    z-index: 1;
  }

I hope that it helps for someone else that comes to find this solution.