Bug: Progress Bar query mode not animated

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

[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.)

[nickofthyme]

I experienced this issue in @angular/material@6.4.7 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 👍