How to put fraction at the middle of percentage in mat progressbar

Question

Hi I am trying to achieve following mat progress bar where the fraction will be displayed at the top of the percentage.

Currently the code I have, I can display the fraction at the beginning of percentage. Here is my code for this:

       <div class="card-body">
            <span id="advance-details" #advancedetails class="progress">{{ CurrentAmount }}
              <span >/ {{ OriginalAmount }}</span></span>
            <mat-progress-bar id="advance-meter" #advancemeter class="meter" color="primary" mode="determinate" [hidden]="!repaymentPercentage"  value="{{ repaymentPercentage }}"></mat-progress-bar>
            <div id="advance-progress" #advanceprogress class="meter-percentage"> {{ repaymentPercentage }}% </div>
        </div>

and corresponding typescript code for this is:

setProgressBarElementsPosition() {

document.getElementById('advance-details')!.style.left = this.repaymentPercentage + "%";
document.getElementById('advance-progress')!.style.left = this.repaymentPercentage + "%";

let widthAdvanceDetails = document.getElementById('advance-details')?.getBoundingClientRect().width;
let positionAdvanceDetails = document.getElementById('advance-details')?.getBoundingClientRect().x;

let widthMeter = document.getElementById('advance-meter')?.getBoundingClientRect().width;
let positionMeter = document.getElementById('advance-meter')?.getBoundingClientRect().x;
let positionMeterEnd = positionMeter! + widthMeter!;

let widthPercentage = document.getElementById('advance-progress')?.getBoundingClientRect().width;
let positionPercentage = document.getElementById('advance-progress')?.getBoundingClientRect().x;

if (positionAdvanceDetails! + widthAdvanceDetails! > positionMeterEnd) {
  document.getElementById('advance-details')!.style.left = positionMeterEnd - positionMeter! - widthAdvanceDetails! + "px";
} else {
  document.getElementById('advance-details')!.style.left = this.repaymentPercentage + '%';
}
if (positionPercentage! + widthPercentage! > positionMeterEnd) {
  document.getElementById('advance-progress')!.style.left = positionMeterEnd - positionMeter! - widthPercentage! + "px";
} else {
  document.getElementById('advance-progress')!.style.left = this.repaymentPercentage + '%';
}
}

the output I am getting is like below picture:

so I want this 11.00/11.00 fraction value should be middle of the progress percentage. How can I achieve this?

Answer 1

Judging by your image and the example image, you want the fraction to be positioned above % number, centered and moving with % change.

I would use something like self.offsetWidth / 2 to find the center of element and use that... somehow. How to implement that into your example is up to you.

    <div style="width: 100%; display: flex; flex-direction: column">
      <div
        style="width: fit-content; margin-right: 10px"
        #self
        [ngStyle]="{'margin-left': 'calc(' + value +'% + 10px - '+ self.offsetWidth / 2 +'px)'}">
        {{value}} / 100
      </div>

      <mat-progress-bar
        class="example-margin"
        [color]="color"
        [mode]="mode"
        [value]="value"
        [bufferValue]="bufferValue">
      </mat-progress-bar>
      
    </div>

Working example: https://stackblitz.com/edit/progressbar-component-gfkdle?file=app%2Fprogress-bar-configurable-example.html