Angular - Material: Progressbar custom color?

Question

I am now trying for hours. I use Material2 and simply want to change the color of the progress-bar. I know there are those themes (primary/accent/warn) but I want to have a

Answer 1

Since nobody mentioned so far...

He's how I solved it.

@Meet Dave is right about his approach. But you should use encapsulation: ViewEncapsulation.None (disables css modules)

Something like this:

Component

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None,
})

Sass (in my case)

.audio-progress-bar {
  &.mat-progress-bar {
    height: 10px;
  }

  .mat-progress-bar-fill::after {
    background-color: #37474f;
  }

  .mat-progress-bar-buffer {
    background-color: #90a4ae;
  }

  /* remove animation and the dots*/ 
  .mat-progress-bar-background {
    animation: none;
    background-color: #eceff1;
    fill: #eceff1;
  }
}

View

<mat-progress-bar
  class="audio-progress-bar"
  mode="buffer"
></mat-progress-bar>

Answer 2

You can add a custom class and add styles to the same in styles.scss (with !important).

.your-custom-class{
  background-color: colorname !important;
}

or you can use the existing class to override the defined css properties by adding them to your global styles.scss file.

.mat-progress-bar-fill::after{
  background-color: colorname;
}
.mat-progress-bar-buffer {
  background: colorname;
}

Answer 3

Update:

Avoid using deep, TL;DR: Deep is technically invalid (like, deeprecated :p)

For more info refer: The use of /deep/ and >>> in Angular 2

Now, to change the color of mat-progress bar, Here is how I got it working,

Head over to your styles.scss file (or the main css/scss file in your project)

Add this class -->

.green-progress .mat-progress-bar-fill::after {
    background-color: green !important;
}

Your mat-progress should use the above class, like -->

<mat-progress-bar class="green-progress" mode="indeterminate"></mat-progress-bar>