Angular - Material: Progressbar custom color?

angular progress bar with steps
angular material circular progress bar
angular form progress bar
angular material indeterminate
mat-spinner' is not a known element
angular material stepper progress bar
progress bar in typescript
determinate progress bar

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

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

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

Change angular material progress bar color from code, .mat-progress-bar-fill::after { background-color: #3f51b5; }. And as we already know that it is not possible to directly manipulate a pseudo  @import '[email protected]/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!

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:

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.

Progress bar, The color of a progress-bar can be changed by using the color property. By default, progress-bars use the theme's primary color. This can be changed to '​accent'  MdProgressBar buffer background color in Angular Material. I'm using progress bar from Angular Material and trying to custom-style it. I can set the borders, radiues, color of the progressed part (buffer?) simply by styling the element itself (e.g. md-progress-bar { border: 1px solid black }) but I cannot add the background color for the bar.

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>

Change angular material progress bar color from code, Theme color palette for the component. @Input(). mode: ProgressBarMode. Mode of the progress bar. Input must be one of these  Angular Bootstrap progress bar is a component which displays a progress of a process in which user is involved. Their color, shape, and animation can be customized. If it takes too long for your website to load up, your user will be less stressed about it when he sees a simple progress bar.

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>

Angular Material Progress Bar: Mat-Progress-Bar Example, Because we can't modify tabs with custom css, so I have to add it to variables.​scss if you want to update any css color or value like font-size like the sass variable  1 Answer 1. In order to use a custom hex palette for an Angular - Material you will need to define the different shades as well as contrast colors for the palette, even if you only want one color.

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.

How can I change the colors of the infinite loading progress , We can create a beautiful Progress bar in Angular using material submitting the form data to server or doing some background work. We can use color property of mat-progress-bar to change the color of the progress bar. Overriding css doesn't work. I tried changing color in material files but they can only be imported, I can't change anything there. I want it to be my custom color, not color from prebiult-themes. css angular angular-material spinner.

Change Progress Bar Color, //<mdb-progress-bar> .progress { .mat-progress-bar-buffer { background-color: #​90caf9 !important; // static light bg-colour } .mat-progress-bar-fill::after  The Angular Material project comes with a built-in story for theming, including using any of Material Design’s own predefined themes, but also creating custom themes that will be used not only by components provided by Angular Material, but also our own custom ones.

Angular Material Plunker Template bar color change, How do I change the background color of the progress bar? And I mean the gray full-width bar, not the little progress. Material Design components for Angular. Sprint from Zero to App. Hit the ground running with comprehensive, modern UI components that work across the web, mobile, and desktop. Fast and Consistent. Finely tuned performance, because every millisecond counts. Fully tested across modern browsers. Themeable, for when you need to stay on brand or

How to change color of spinner and progress bar? · Issue #73 , DOCTYPE html> <html> <head> <title>Angular Material Plunker</title> <! <​body class="mat-app-background"> <material-app>Loading the Rt-progress-bar. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. How to change color of

Comments
  • How about setting these classes: github.com/angular/material2/blob/master/src/lib/progress-bar/…
  • thanks, that worked for me.. I just made a new theme.scss and included it to the angular-cli.json, there I override the colours :) . big thanks
  • This should be the selected answer as it responds directly and correctly to the matter at hand, without the need to change CSS to SCSS and other bull.
  • ng-deep is deprecated
  • I know it is deprecated, but there is no other replacement that works for now. more details.
  • To elaborate on why it works in the global styles: It's because of how ViewEncapsulation 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.
  • I wanted to avoid using ::ng-deep, but unfortunately this didn't work for me. The answer by @Simonca above (using ::ng-deep) did work.
  • ng-deep is deprecated
  • hi, thanks for the answer.. this unfortunately does not work.
  • U can try with !important otherwise make a demo url