question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug: Progress Bar query mode not animated

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:10
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
dannyecommented, Jul 19, 2018

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

4reactions
nickofthymecommented, Feb 21, 2019

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 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

Indeterminate progress bar not working properly
It shows on screen as determinate status bar. I have tried with different modes too i.e. query,buffer. But it only works as a...
Read more >
Progress Bar in Angular using Material component mat ...
This mat-progress-bar is part of angular material module called ... Determinate mode; Indeterminate mode; Buffer mode; Query mode.
Read more >
UIProgressView progressTintColor bug - Apple Developer
The bug is that when I change at runtime the progressTintColor the progress bar becomes rounded corners and the actual progress does not...
Read more >
22615 – [Dialogs] Native ProgressBar look does not ... - Bugs
On MacOS X the Windows look of the AnimatedProgress does not match the Aqua look of the native ProgressBar. So clients using the...
Read more >
ProgressBar - Android Developers
Use indeterminate mode for the progress bar when you do not know how long an ... android:animationResolution, Timeout between frames of animation in ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found