Greetings! My objective is to create a material progress bar with the fraction displayed at the top of the percentage.
https://i.sstatic.net/GbphJ.png
Currently, I have managed to show the fraction at the beginning of the percentage. Below is the code snippet:
<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"&e;> {{ repaymentPercentage }}% </div>
</div>
and here is the corresponding typescript code:
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 current output resembles the image below:
https://i.sstatic.net/I1WnX.png
I am aiming for the fraction value 11.00/11.00 to be positioned in the middle of the progress percentage. How can I achieve this?