Angular/material2 mat-spinner resize

javascript

responsive-design

best-practices

css

byAnton Shumikhin·Oct 11, 2024

Resize the Angular Material mat-spinner through CSS scaling using transform: scale(X). For a doubled size spinner (aka big bertha), set X to 2:

.mat-spinner {
  transform: scale(2); // Not too shabby, huh?
}

Or explicitly specify the dimensions with width and height like a boss:

.mat-spinner {
  width: 100px; // Going horizontal!
  height: 100px; // Sky's the limit!
}

The trick is to apply these CSS rules in the specific component's CSS sticking to our version of social distancing with global style changes.

Diameter Property: The Magnifying Glass

The diameter property takes on the role of a zoom lens. You can set the size of mat-spinner by attributing a value directly to the element itself:

<mat-spinner [diameter]="70"></mat-spinner> // Size: 70, a perfectly average prime number. Go figure!

Sidenote: The spinner aka social butterfly gracefully adjusts itself to the size of its parent container, making your life easier.

Recommended: Keep it in the Stylesheets

Though inline styles may seem like a greased lightning, in the long run, they transform into silent little chaos. So, always aim for maintainable, organized styling by keeping the CSS in stylesheets.

CSS 'zoom': When scaling is having a field day

To rescale a spinner within a button without doing a Hulk on the button size, consider using the CSS zoom property:

button .mat-spinner {
  zoom: 0.5; // Spinner goes incognito
}

This subtle zoom keeps the spinner size in check without taking any toll on the button's size or elegance.

Component-wise custom spinner sizing

Keeping the specific screen size in mind, you can custom size your spinner. Let's explore how.

Colossal or Compact: Media Queries

Opt for media queries to ensure your spinner maintains its charm on a range of screen sizes:

@media (max-width: 600px) {
  .mat-spinner {
    /* Adjust size for small devices or tiny goblins */
    transform: scale(0.75);
  }
}

From the slingshot to the catapult: Progressive Enhancement

Encourage your mat-spinner to grow with screen size. Leverage progressive enhancement to increment the spinner size gradually:

/* Just as coffee brews, let the size brew on larger screens */
@media (min-width: 720px) {
  .mat-spinner {
    transform: scale(1.5);
  }
}

Keeping the style in style: Smart Proportions

Keeping the spinner to its surroundings' proportion promotes aesthetic and functional integrity. Too small, and it's a goner; too big, and we have King Kong in town.