CODEWITHSUNDEEP
angularangular-material2
bdparrish
bdparrish

Reputation: 2764

Angular2 Material2 <md-spinner> not showing but is working

My assumption is that my css is not correct, but alas I cannot figure this out.

<div *ngIf="loading">
  <md-progress-circle mode="indeterminate" color="warn">Loading...</md-progress-circle>
</div>
<md-list>
  <md-list-item *ngFor="let incident of incidents">
    <h3 md-line> {{name}} </h3>
    <p md-line>
      <span>{{date}} > </span>
      <span>{{text}}</span>
    </p>
  </md-list-item>
</md-list>

enter image description here

Upvotes: 15

Views: 11327

Answers (7)

Sheikh Wahab Mahmood
Sheikh Wahab Mahmood

Reputation: 428

in your src/styles.css file add the following line:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Upvotes: 0

Jonath P
Jonath P

Reputation: 571

In my case, I had installed material with npm install --save @angular/material

but I was missing ng add @angular/material

Upvotes: 0

Wolfium
Wolfium

Reputation: 146

In my similar case, spinner not showing and not throwing errors on screen, even the tag is parsed, I tried misspelling tag and angular throw tag not expected...

The fix was to be sure that MatProgressSpinnerModule is imported in the application. Once imported spinner showed up perfectly.

I am guessing why the tag is parsed while progress spinner module was still not imported and I suppose that tag is registered in another more general imported module, not sure which.

Upvotes: 0

Vlad
Vlad

Reputation: 8553

For me fixing this properties helps

/deep/ .mat-progress-spinner circle, /deep/ .mat-spinner circle {
    stroke: white;
}

where white is your visible color of spinner

Upvotes: 2

maia
maia

Reputation: 4360

In my case, I had a font-awesome spinner, and it was working but not visible because the FontAwesome css file hadn't fully loaded yet. The solution was to use npm angular2-fontawesome rather than to link the css file in index.html.

Upvotes: 0

Micheal Hill
Micheal Hill

Reputation: 1649

You need to make sure you're using a theme for @angular/material.

From the getting started guide:

Include the core and theme styles:

This is required to apply all of the core and theme styles to your application. You can either use a pre-built theme, or define your own custom theme.

I've found using @angular/material without a theme to work only some of the time. Text inputs work but radiobuttons, checkboxes - and it appears the spinners - require a theme to work properly.

As noted in the quote, you can either use one of the provided themes (there's currently 6 provided) or create your own. The provided themes can be included in your css using @import('~@angular/material/core/theming/prebuilt/<theme>.css').

Upvotes: 17

Brian Parker
Brian Parker

Reputation: 14553

Change:

[color]="'warn'" [mode]="'indeterminate'"

Use square brackets for binding. As you are assigning strings directly you have to use " and '

Add this line to your index.html header

<link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

Upvotes: 0

Related Questions