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 custom color (green) for my progressbar.

I already tried the weirdest css-combinations.. but with no effort. Maybe someone had the same problem?

Answer 1

You can use ::ng-deep selector to achieve what you want, this answer has some info on it.

How I did it:

CSS

::ng-deep .mat-progress-bar-fill::after {
    background-color: #1E457C;
}

::ng-deep .mat-progress-bar-buffer {
    background: #E4E8EB;
}

::ng-deep .mat-progress-bar {
    border-radius: 2px;
}

HTML

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

And the result is this:

EDIT:

I found a way to avoid using ::ng-deep as it will be removed from angular soon. It seems that if you move your style from your component.css file to the global styles.css file it will work without ::ng-deep.

So, a style defined above can change in

mat-progress-bar .mat-progress-bar-buffer {
  background: #E4E8EB;
}

Move it to styles.css and it will be applied like this:

LATER EDIT

As an explanation why setting styles in the global style sheet works:

For components the default is that angular adds a attribute to each DOM-element of a component, and then adds the same attribute to every class in the css for the same component. Adding styles to a global stylesheet does not add these attributes, hence the style will be applied. (thanks Jompis for this)

This worked for me on a new project. I did not checked specifically with the old code but the conditions are the same and there is no reason for it not to work.

Answer 2

UPDATE: Exercise caution when deciding to disable CSS modules, ensuring that you fully comprehend the potential risks involved. While it's important to be confident in your understanding, avoid being confined to dogmatic truths. Always strive to grasp the problems you're addressing thoroughly.

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 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>

Answer 4

Angular 8 solution:

for me it was putting my styling in a top level .scss file. Also had to select in .scss as follows:

html:

<mat-progress-bar [ngClass]="passwordStatusBarColor" 
                  aria-label="Password strength meter"
                  mode="determinate"
                  [value]="progress">
</mat-progress-bar>

<!--passwordStatusBarColor could be 'weak', 'weakest', etc. with a corresponding rule-->

styles.scss:

.weakest {
  .mat-progress-bar-fill::after {
    background-color: yellow;
  }
}

Answer 5

For me I just need to put in CSS this rule:

div.mat-progress-bar-primary.mat-progress-bar-fill.mat-progress-bar-element::after{ background-color: green; }

But clearly is easier if you use a theme.

Answer 6

I can suggest to change one of the premade primary/warn/accent colors to your custom color.

In your styles.scss (if your style file is css you will have to change it to support scss):

  @import '~@angular/material/theming';
  // Plus imports for other components in your app.

  // Include the common styles for Angular Material. We include this here so that you only
  // have to load a single css file for Angular Material in your app.
  // Be sure that you only ever include this mixin once!
  @include mat-core();

  // Define the palettes for your theme using the Material Design palettes available in palette.scss
  // (imported above). For each palette, you can optionally specify a default, lighter, and darker
  // hue.

  $mat-blue: (
    50: #e3f2fd,
    100: #bbdefb,
    200: #90caf9,
    300: #64b5f6,
    400: #42a5f5,
    500: #2196f3,
    600: #1e88e5,
    700: #1976d2,
    800: #1565c0,
    900: #0d47a1,
    A100: #82b1ff,
    A200: #448aff,
    A400: #2979ff,
    A700: #2B66C3,
    contrast: (
      50: $black-87-opacity,
      100: $black-87-opacity,
      200: $black-87-opacity,
      300: $black-87-opacity,
      400: $black-87-opacity,
      500: white,
      600: white,
      700: white,
      800: $white-87-opacity,
      900: $white-87-opacity,
      A100: $black-87-opacity,
      A200: white,
      A400: white,
      A700: white,
    )
  );

  $candy-app-primary: mat-palette($mat-blue, A700);
  $candy-app-accent:  mat-palette($mat-orange, A200, A100, A400);

  // The warn palette is optional (defaults to red).
  $candy-app-warn:    mat-palette($mat-red);

  // Create the theme object (a Sass map containing all of the palettes).
  $candy-a-theme($candy-app-theme);
pp-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

  // Include theme styles for core and each component used in your app.
  // Alternatively, you can import and @include the theme mixins for each component
  // that you are using.
  @include angular-material

Answer 7

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 8

Change the config in the component typeDecorator:

encapsulation: ViewEncapsulation.None

then...

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

Answer 9

For me none of the solutions above worked for me. (using Angular 14 and Angular Materials 15.1)

First of all, to find the problem i had to inspect the elements using the DevTools browser debugger.

Here is the code to change the color of the fill bar (actually border...) :

.mdc-linear-progress__bar-inner {  
border-color: red !important;
}

This code must be placed in the root stylesheet (style.css).

Regarding the mat-progress-bar-buffer, simply used the following code (to put in the style.css file) :

mat-progress-bar  {
:first-child {
background-color: gray;
 }
}

Answer 10

Angular 7 and Material 7.1.1

 ::ng-deep .mat-progress-spinner circle, .mat-spinner circle{
        stroke: green !important; 
}

Answer 11

Without using ::ng-deep, ViewEncapsulation or theming, we can customise the progress bar using just clean scss by placing below code in style.scss:

.mat-progress-bar {
    .mat-progress-bar-fill::after{
        background: #007bff;
    }
    .mat-progress-bar-buffer{
        background: white;
    }
}

.mat-progress-bar[mode=indeterminate] {
    .mat-progress-bar-fill::after{
        animation-duration: 1000ms !important;
    }
    animation-duration: 1000ms !important;
    .mat-progress-bar-primary{
        .mat-progress-bar-fill::after{
            animation-duration: 1000ms !important;
        }
        animation-duration: 1000ms !important;
    }
    .mat-progress-bar-secondary {
        .mat-progress-bar-fill::after{
            animation-duration: 1000ms !important;
        }
        animation-duration: 1000ms !important;
    }
}

Using the above styling pattern in style.scss, I was able to customise pretty much any aspect of the progress bar. We can adjust the mode as per the type of progress bar we are using.

Answer 12

In your html:

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

In your global style (the one mentioned in .angular-cli.json under styles property:

//This one is the moving color
.my-progress-bar .mat-progress-bar-fill::after {
  background-color: #e91b22;
}

// This will become the background color of your bar
.my-progress-bar .mat-progress-bar-buffer {
  background: white;
}

Even if you include any material theme, above config will override it

Answer 13

2023 answer:

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

Answer 14

You can override only progress bar backgroud-color through this method added custom class then apply css by combination of tag and class like-

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

Change into style.css

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