angular material mat spinner custom style | Angular Material 17 | MDC [NEW]
There have been some changes to class names, particularly with the re-implementation of several components based on the Material Design Components (MDC). In this video you will learn how override style of angular material spinner. angular material progress spinner is one of the most utilized angular material component
In this video we will see how to customize angular material spinner css. At the end of this video you will also able write angular material spinner custom style.
changes to class names in Angular Material due to the MDC adoption. Here's a breakdown of the information you provided and some additional insights:
Class Name Changes:
Old: .mat-progress-spinner classes
New (MDC-based): .mat-mdc-progress-spinner classes with nested MDC class names (e.g., .mdc-circular-progress__indeterminate-circle-graphic)
You're absolutely right about the changes to class names in Angular Material due to the MDC adoption. Here's a breakdown of the information you provided and some additional insights:
Class Name Changes:
Old: .mat-progress-spinner classes
New (MDC-based): .mat-mdc-progress-spinner classes with nested MDC class names (e.g., .mdc-circular-progress__indeterminate-circle-graphic)
Customizing Spinner CSS
The video outlines a process to customize the Angular Material progress spinner's CSS:
-Find the Component Documentation: Visit the official Angular Material documentation ( and navigate to the "Progress Spinner" component.
-Import the Module: As mentioned in the video, import the MatProgressSpinnerModule in your component's TypeScript file.
-Inspect Element: Use browser developer tools to inspect the spinner element and identify the relevant CSS classes (now using the MDC-based naming convention).
-Override Styles: Create a CSS rule that targets the specific MDC class and sets the desired properties (e.g., stroke for color). You can use a global stylesheet or a more targeted approach within your component's styles.
/* Example using a global stylesheet (not recommended for extensive customization) */
.mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic {
stroke: !important;
}
/* Preferred approach (within component styles): */
:host ::ng-deep .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic {
stroke: !important;
}
Watch video angular material mat spinner custom style | Angular Material 17 | MDC [NEW] online without registration, duration 02 minute 15 second in high hd quality. This video was added by user Quick Code Academy 06 March 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 436 once and liked it 4 people.