css - Angular Material UI progress bar, change the style of the progress bar easily - Stack Overflow

I'm trying to change the appareance of the default progress bar of the latest material ui, the color for example that's by default is blue

`<mat-progress-bar  mode="buffer" [value]="element.HP" [bufferValue]="element.HP"></mat-progress-bar>`

i'm trying with css but i dont understand why it kept always the default style even if i put some styles in my css for changing the default color. Any idea to how solve this problem will be appreciated, thanks in advance!

I'm trying to change the appareance of the default progress bar of the latest material ui, the color for example that's by default is blue

`<mat-progress-bar  mode="buffer" [value]="element.HP" [bufferValue]="element.HP"></mat-progress-bar>`

i'm trying with css but i dont understand why it kept always the default style even if i put some styles in my css for changing the default color. Any idea to how solve this problem will be appreciated, thanks in advance!

• css
• angular
• typescript

Share Improve this question Follow edited Feb 3 at 16:57 Fallingstar Warrior asked Feb 3 at 16:37 Fallingstar WarriorFallingstar Warrior 3544 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

.mat-mdc-progress-bar { --mdc-linear-progress-active-indicator-color: green; //progress bar color --mdc-linear-progress-track-color: black; // background color }

This is the solution i found for a quick and dirty way for changing it via css.

Please have a look

https://material.angular.io/components/progress-bar/styling

You can find the design token in the list

• active-indicator-color
• track-color

If you are using the material 2 version, you can use the color property. Therefor you should define a theme with you colors.

Information can be found here:

https://material.angular.io/guide/material-2-theming#defining-a-theme