Add a percentage text to a static Ionic 4 progress bar

Question

The actual version of the Ionic progress bar comes without an option to display the percentage text.

I tried to add it manually using the ::after selector but to no avail.

This is my Ionic code:

ion-progress-bar {
  height: 18px;
  border-radius: 20px;
}

<ion-progress-bar color="success" value="0.9"></ion-progress-bar>

While inspecting the element this is what I get in chrome's elements inspector

.progress, .progress-indeterminate {
    background: var(--progress-background);
    z-index: 2;
}

.buffer-circles, .indeterminate-bar-primary, .indeterminate-bar-secondary, .progress, .progress-buffer-bar, .progress-buffer-bar:before, .progress-indeterminate {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

<ion-progress-bar _ngcontent-c0="" color="success" value="0.9" ng-reflect-value="0.9" ng-reflect-color="success" role="progressbar" aria-valuenow="0.9" aria-valuemin="0" aria-valuemax="1" class="ion-color ion-color-success progress-bar-determinate hydrated">
  #shadow-root
  <!-- ....... -->
  <div class="progress" style="transform: scaleX(0.9);"></div>
  <div class="progress-buffer-bar" style="transform: scaleX(1);"></div>
</ion-progress-bar>

The only way with which I can add a text from the elements inspector to the progress bar, is to add it inside the div with the progress class:

<div class="progress" style="transform: scaleX(0.9);">90%</div>

But adding this text from my Ionic code isn't possible, so I tried to use the ::after selector but It did not work:

.progress:after{
  content: "90%";
}

I don't need that the text changes dynamically since the progress-bar must display a static value that does not change.

Thanks!

Answer 1

simply you can put

ion-progress-bar {height:15px;}

in global.scss .. if you also want to make the border radius then you can add the radius inside as well , as

ion-progress-bar {height:15px;border-radius:15px;}