How to change animation of material "mat-progress-bar " to start from 0 instead of 100?

user_16729348 0
Viewed 340

I am using progress bar from material on angular:

<mat-progress-bar  mode="determinate" value="40"></mat-progress-bar>

when I refresh the page, I notice the progress bar starts with 100 and then reduce the value to 40. Is there a way to change this behavior, so that progress bar starts with 0 and increase to 40?

material-ui angular-material angular progress-bar
1 Answers

It seems that your problem is related to this mat-progress-bar bug. Even tough one user mentioned he cannot reproduce it anymore in Angular 13, the issue still seems to be present.

One workaround is to disable the transitions:

.mat-progress-bar .mat-progress-bar-fill {
    transition: none !important;
}
user_21503420
Related