How to style progress-bar
Styles from thematerial/progress-bar
package can be customized using the progress-bar-overrides
mixin. This mixin accepts a set of tokens that control how the components will look, either for the entire app or under a specific selector. For example: @use '@angular/material' as mat;
// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
@include mat.progress-bar-overrides((
active-indicator-color: orange,
track-color: red,
));
}
Tokens supported by progress-bar-overrides
Name | Type | Based on system token |
---|---|---|
active-indicator-height | Base | None |
track-height | Base | None |
track-shape | Base | None |
active-indicator-color | Color | --mat-sys-primary |
track-color | Color | --mat-sys-surface-variant |