2

I am trying to add a mat-spinner from Angular Material to my Angular app. The mat-spinner documentation can be found here.

In the documentation, you can see the spinner continuously spins with just the below code:

<mat-spinner></mat-spinner>

I have added this to my app, but instead of spinning, it is remaining completely static. Please see below:

Can someone please tell me what else needs to be added so that it spins continuously. There are no console errors appearing also.

enter image description here

user9847788
  • 2,135
  • 5
  • 31
  • 79
  • It will be helpful if we can get your code on stackbitz. As you can see - https://stackblitz.com/angular/lmgonqdgkxpk?file=src%2Fapp%2Fprogress-spinner-configurable-example.ts – Anuj Raghuvanshi Dec 09 '19 at 19:11
  • Please use mode value as indeterminate for the spinner to be functional – KKGupta Dec 09 '19 at 19:12
  • 1
    @KKGupta Thanks for your suggestion. When I try your code the spinner appears the exact same as the image in my question. Instead of that, I want the spinner to appear as if it's continuously "loading" – user9847788 Dec 11 '19 at 16:14
  • @user9847788 Did you find the cause of this? I'm having the same darn issue. On stackblitz the demo I have works just fine but on my other system I have lost my mind trying to figure out why it wont animate. and wont work as I was hoping they would. – edjm Dec 17 '19 at 11:21

1 Answers1

3

I found the issue for my project. You don't want to have the noopAnimationModule imported. From what another poster stated it should be used when running tests or for slower systems that have issues with animation. Someone decided to put it in our application.

What's the difference between BrowserAnimationsModule and NoopAnimationsModule?

So remove the import for noopAnimationModule from your app.module.ts or wherever you have it imported.

edjm
  • 4,830
  • 7
  • 36
  • 65
  • 1
    My IDE have just auto imported `NoopAnimationsModule` instead of `BrowserAnimationsModule`. Took me a while to get why animations are not working thank you. – fires3as0n May 05 '20 at 18:29