Components: Bug: Progress Bar query mode not animated

[danielsogl]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Show query animation

What is the current behavior?

Progress bare with the mode query is not animated anymore since Angular Material 6.1.0

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

Add this progress bar for example with the latest angular material version 6.2

<mat-progress-bar mode="query" color="accent"></mat-progress-bar> 

or check out the angular material website: https://material.angular.io/components/progress-bar/overview

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

• latest Angular
• Angular CDK 6.1.0
• Angular Material 6.1.0

[odahcam]

Angular Material 6.2.0 has the same issue.

[danielsogl]

Yes because the PR is not merged as you can see.

[arghyaiitb]

The issue is for mode="indeterminate" too.

[csbenjamin]

mode="indeterminate" works for me. Only mode="query" doesn't work. I'm using angular material version 6.3.3.

[dannye]

indeterminate, query, and buffer all don't animate for me.

The buffer's specified value and bufferValue do correctly set up the progress bar, but it is static.

In addition, for both determinate and buffer, when the value is changed, there is no smooth transition between the start value and end value, it just "snaps" immediately to the new value.

I'm using Angular CLI 6.0.8 and @angular/material 6.4.0

(this is all true for spinners as well.)

[jingjlii]

In @angular/cli 6.1.2, @angular/material 6.4.2, the buffer mode does not work, the progress bar is hidden.

[ItamarSerafim]

Guys, I think I know what the problem is:
It works when I change the theme from

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

to

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Try it at this example

[ItamarSerafim]

In my case I found out that this css rule:

.mat-progress-bar-fill::after {
background-color: #c2185b;
}

is too similar to this:

.mat-progress-bar-buffer {
background-color: #e91e63;
}

You can't distinguish the background color of the too elements

[AndreyBespamyatnov]

In my case I found out that this css rule:

.mat-progress-bar-fill::after {
background-color: #c2185b;
}

is too similar to this:

.mat-progress-bar-buffer {
background-color: #e91e63;
}

You can't distinguish the background color of the too elements

I'm using the latest versions of Material and Angular, and it works for me.

Try to check, maybe you have imports: NoopAnimationsModule, cause it will disable all animations for your app)

[odahcam]

NoopAnimationsModule when imported just in server-side should not affect the client-side module who should import the BrowserAnimationsModule for the animations to work.

[nickofthyme]

I experienced this issue in @angular/[email protected] when using the MatProgressBarModule like so

<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>

The ngIf was showing and hidding the bar just fine but the animation was FROZEN ☃️. So I started to remove classes on the mat-progress-bar component as found the issue to be with the class _mat-animation-noopable. If I remove this class everything is totally fine. This class seems to be removing the animation when not loading.

Which is clear when looking at the scss of the mat-progress-bar component.

https://github.com/angular/material2/blob/2290063ec817810d40fead7e237259c1aaf1d7d7/src/lib/progress-bar/progress-bar.scss#L139-L153

This class is bound to the mat-progress-bar here

https://github.com/angular/material2/blob/2290063ec817810d40fead7e237259c1aaf1d7d7/src/lib/progress-bar/progress-bar.ts#L96

_noopAnimation is set in the constructor based on the _animationMode

https://github.com/angular/material2/blob/2290063ec817810d40fead7e237259c1aaf1d7d7/src/lib/progress-bar/progress-bar.ts#L124

_animationMode is an @Optional InjectionToken of the following type ANIMATION_MODULE_TYPE

export declare const ANIMATION_MODULE_TYPE: InjectionToken<"NoopAnimations" | "BrowserAnimations">;

Which is set here
https://github.com/angular/material2/blob/2290063ec817810d40fead7e237259c1aaf1d7d7/src/lib/progress-bar/progress-bar.ts#L107

The issue is that the default value sets this InjectionToken to 'NoopAnimations' which adds the class to the component and FREEZES the animations. By providing ANIMATION_MODULE_TYPE with a 'BrowserAnimations' which will not add the class to the component and unfreezes the animations. You can do this in the component that is using the mat-progress-bar as such.

@Component( {
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: [ './my-component.component.scss' ],
  providers: [
    { provide: ANIMATION_MODULE_TYPE, useValue: 'BrowserAnimations' },
  ],
} )
export class MyComponent {}

⚠️ I am not 100% certain about the implications of this but it is a working fix until I upgrade to ng7. I also tried to bind the _mat-animation-noopable class to the isLoading boolean but that does NOT work 😞. But for my use I don't need that since I just hide and show using an ngIf.

<mat-progress-bar
 *ngIf="isLoading"
 mode="indeterminate"
 [ngClass]="{ '_mat-animation-noopable': isLoading }"
>
</mat-progress-bar>

Hope this helps someone 👍

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}