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?
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.
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>
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 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;
}
}
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
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.
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;
}
Change the config in the component typeDecorator:
encapsulation: ViewEncapsulation.None
then...
.mat-progress-bar-fill::after {
background-color: $color;
}
Angular 7 and Material 7.1.1
::ng-deep .mat-progress-spinner circle, .mat-spinner circle{
stroke: green !important;
}
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.
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;
}
