<svg width="100%" height="24" overflow="visible">
  <rect width="100%" rx="7.3" ry="7.3" height="22" style="fill:var(--ion-background-percentagebar-color)" />
  @if (value) {
    <rect x="2" y="2" rx="6" ry="6" height="18" style="fill:var(--ion-color-active-percentagebar)"
      [style]="'width: calc(' + value + '% - 4px); transition: width 0.5s ease-in-out;'" />
  }
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" style="font-weight: 500"
    class="percentage-style">
    {{ value | unitvalue: '%' }}
  </text>
</svg>
