CODEWITHSUNDEEP
angularprogress-barangular-materialspinnertransparent
Rapido
Rapido

Reputation: 372

Angular Material Progress spinner and Progress bar does'nt show

I'm working on Angular 4. And I made a new project with :

ng new test-app

Then I ran :

npm install --save @angular/material @angular/cdk
ng g c first

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';

import { MatProgressBarModule, MatProgressSpinnerModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    FirstComponent
  ],
  imports: [
    BrowserModule,
    MatProgressBarModule,
    MatProgressSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

first.component.html 

<p>
  first works!
</p>


<mat-spinner></mat-spinner>

<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>

Result here in the browser

Result with the inspector browser

In the inspector the spinner looks like to be working. (same things for the progress bar) But without the inspector I can not see anything.

I tried to change color in css, the background seems to works but the color doesn't change anything.

How can I see my spinner or my progress-bar?

Upvotes: 3

Views: 10029

Answers (3)

Janakiram
Janakiram

Reputation: 1

try this in you styles.css

.mat-progress-spinner circle, .mat-spinner circle {
     stroke: blue; 
}

Upvotes: 0

Ovesh Parasara
Ovesh Parasara

Reputation: 11

Override css in style.scss in angular:

.mat-progress-spinner.mat-progress-spinner-indeterminate- 
animation[mode=indeterminate] {
    animation: mat-progress-spinner-linear-rotate 2s linear infinite !important;
}

.mat-progress-spinner.mat-progress-spinner-indeterminate- 
animation[mode=indeterminate] circle {
    transition-property: stroke !important;
    animation-duration: 4s !important;
    animation-timing-function: cubic-bezier(.35,0,.25,1) !important;
    animation-iteration-count: infinite !important;
}

Upvotes: 1

Kim Kern
Kim Kern

Reputation: 60357

You have to import a theme in your styles.css, e.g. add this line to the top of the file:

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

Since some components depend on the BrowserAnimationsModule, you should always import it for animations to work.

For more detailed information about the required setup, checkout the setup guide.

Upvotes: 8

Related Questions