Thanks, we will fix that.

Converted to mdb-progress and dumped my previous styles and it works !

PS. The API section here https://mdbootstrap.com/docs/angular/components/progress-bar is not about progress. It was copied from ProgressSpinnerComponent

Dear @mdb2

As I said, please refactor your div.progress elements to mdb-progress component, and everything will be okay.

Here you can find docs for Progressbars.

Best Regards,

Damian

<a (click)="click()">
  <div class="card card-cascade cascading-admin-card">
    <div class="admin-up">
      <i class="{{icon}} blue darken-3"></i>
      <div class="data">
        <p>{{caption}}</p>
        <h3 style="direction:ltr">{{ amount }}</h3>
      </div>
    </div>

    <div *ngIf="prev" class="card-body">
      <div class="progress">
        <div class="progress-bar bg-{{style}}" role="progressbar" [style.width]="percentage+'%'" aria-valuenow="{{percentage}}" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <p class="card-text">{{percentage}}% {{relative}} prev: <span>{{ prev }}</span></p>
    </div>
  </div>
</a>

scss

.cascading-admin-card {
  text-transform: uppercase;
  margin-top: 20px;

  .admin-up {
    margin-left: 4%;
    margin-right: 4%;
    margin-top: -20px;

    .fa,
    .fab,
    .far {
      float: left;
      padding: 1.2rem;
      font-size: 2rem;
      color: white;
      margin-left: 1rem;
    }

    .data {
      margin-top: 2rem;

      p {
        color: $Gray;
        font-size: 16px;
      }
    }
  }
}

Dear @mdb2

I would like to see the code from this example. Could you please provide me with it? If there's no mdb-progress component, but only div.progress that's the correct behavior.

Please check this component, and if there's no mdb-progress component, please refactor your code.

Best Regards,

Damian