Gerolmed
Gerolmed

Reputation: 403

Angular Material Progress Spinner not animated

I am trying to add an indeterminate spinner from Angular Material. I checked the official stack blitz example https://stackblitz.com/angular/nkabnxaenep. I compared the package jsons and cant find any differences. a am ahead a few minor versions. The determinate mode works though... I imported the correct module and there are no errors at runtime.

<mat-spinner mode="indeterminate"></mat-spinner>

not working spinner image

Any ideas? Tell me if you need more information.

Upvotes: 5

Views: 3295

Answers (2)

Robin De Schepper
Robin De Schepper

Reputation: 6355

To enable the animations of Angular Material you have to import the BrowserAnimationsModule into your AppModule as mentioned in the 3rd step of the getting started guide.

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    // NoopAnimationsModule,
    ...

Note: make sure to remove the NoopAnimationsModule from your project as well.

Update: The recommended way to install Angular Material nowadays is with ng add @angular/material, which should already set this up for you.

Upvotes: 8

Efi Gordon
Efi Gordon

Reputation: 446

Like @Robin De Schepper suggested, the solution is to add BrowserAnimationsModule to app.module.ts

like this:

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    // NoopAnimationsModule,
    ...

NOTE: For the newer versions of Angular, if you have NoopAnimationsModule in your imports array, you must comment/remove it.

Upvotes: 2

Related Questions