Skip to main content

angular material - How to change Progress spinner color

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
      /deep/ .mat-progress-spinner circle, .mat-spinner circle {
        stroke: YellowGreen;
      }
  `]
})


export class AppComponent {
  isTaskRunning:boolean = false;
  message:string = "The task is not run yet."

  runTask(){
    this.isTaskRunning = true;
    this.message = "Task is running now."
    
    // Do the task here
    this.delay(15).then(()=>{
      this.isTaskRunning = false;
      this.message = "Task is finished."
    });
  }

  delay(seconds:number) {
    return new Promise(
      resolve => setTimeout(resolve, seconds * 1000)
    );
  }
}
app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
    Angular Material - How to change Progress spinner color
</h2>


<h4 style="margin-bottom:25px;">
    {{message}}
</h4>

<button 
    mat-raised-button color="primary" 
    [disabled]="isTaskRunning"
    style="margin-bottom:25px;"
    (click)="runTask()">
        Run Task
</button>

<mat-progress-spinner 
    mode="indeterminate" 
    *ngIf="isTaskRunning">
</mat-progress-spinner>
app.module.ts [import] 

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'
import {MatButtonModule} from '@angular/material/button'
More Angular tutorials
Labels: