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

Improve this question
4
  • It will be helpful if we can get your code on stackbitz. As you can see - stackblitz.com/angular/… Commented Dec 9, 2019 at 19:11
  • Please use mode value as indeterminate for the spinner to be functional <mat-progress-spinner class="example-margin" [mode]="indeterminate" </mat-progress-spinner> Commented Dec 9, 2019 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" Commented Dec 11, 2019 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. <mat-spinner class="loading-indicator" mode="indeterminate"></mat-spinner> and <mat-progress-spinner class="loading-indicator" mode="indeterminate"></mat-progress-spinner> wont work as I was hoping they would. Commented Dec 17, 2019 at 11:21

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

My IDE have just auto imported NoopAnimationsModule instead of BrowserAnimationsModule. Took me a while to get why animations are not working thank you.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.