cssangulartypescript

Angular Material UI progress bar, change the style of the progress bar easily

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!

Solution

  • Please have a look

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

    You can find the design token in the list

    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