bug(spinner): <mat-spinner> does not rotate

[kambbado]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

19.2.17

Description

The <mat-spinner> component, when used in indeterminate mode, appears as a static circle and does not display any rotation animation. This issue prevents users from seeing the expected visual feedback of an ongoing process.

Reproduction

StackBlitz link: (https://stackblitz.com/edit/components-issue-starter-njn7kwxq?file=src%2Fspinner.component.ts)
Steps to reproduce:

1. Observe the <mat-spinner> element in the preview pane.

Expected Behavior

The <mat-spinner> should continuously rotate.

Actual Behavior

The <mat-spinner> is rendered as a static blue circle and does not animate.

Environment

• Angular: 20.0.0
• CDK/Material: 20.0.1
• Browser(s):137.0.7151.56
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

The spinner in your example works for me. Most likely your system has reduced motion enabled which we now handle automatically. See https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences.

[kambbado]

I updated my spinner component to the code below, which enabled the actual spinning.

HTML

<div class="spinner-page-container">
    <div class="spinning-ring"></div>
</div>

SCSS

.spinner-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    overflow: visible;
    margin: auto;
}

.spinner-page-container:before {
    content: '';
    display: block;
    position: fixed;
    background-color: #ededed;
}

.spinning-ring {
    width: 5em;
    height: 5em;

    border-radius: 50%;

    border: 0.5em solid rgba(0, 92, 187, 0.2);
    border-top-color: #005cbb;

    background-color: transparent;

    animation: rotate-spinner 1.2s linear infinite;

    box-shadow: 0 0 10px rgba(0, 92, 187, 0.1);
}

[kambbado]

The spinner in your example works for me. Most likely your system has reduced motion enabled which we now handle automatically. See https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences.

Yes, changing my Visual Effects on my Windows environment resolved the spinner issue. Very interesting, thank you for pointing it out.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}