argos/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.html

<div class="demo-progress-bar-container">
  <div class="percentage d-flex justify-content-center"><span *ngIf="total>0">{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}</span>&nbsp;</div>
  <mat-progress-bar *ngIf="value" class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="value"></mat-progress-bar>
  <mat-progress-bar *ngIf="!value" class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="0"></mat-progress-bar>
  <div class="percentage" [ngStyle]="{'padding-left': value ? value - 10 + '%' : 0 + '%' }">
    <span *ngIf="value">{{value}}%</span>
    <span *ngIf="!value">0%</span>
  </div>
</div>