Minimal Animation for mat-progress-bar and mat-progress-spinner in indeterminate Mode with prefers-reduced-motion Enabled

[balahv]

trafficstars

Feature Description

Description

In Angular Material 20 (and possibly earlier versions), the mat-progress-bar and mat-progress-spinner components in indeterminate mode completely disable animations when the system setting prefers-reduced-motion: reduce is active. While this behavior aligns with accessibility guidelines (WCAG), it creates a usability issue for the user interface.

The mat-progress-bar and mat-progress-spinner in indeterminate mode are not merely decorative animations — they are functional indicators of background activity (e.g., data loading, request processing). Disabling animations entirely when prefers-reduced-motion: reduce is enabled renders these components static, which can mislead users into thinking the interface is "frozen" or unresponsive. This is especially problematic in single-page applications (SPAs), where these components often serve as replacements for native browser loading indicators.

I intentionally enable prefers-reduced-motion in Windows 10 to reduce distracting or resource-heavy animations, such as window transitions. However, even with this setting enabled, browsers like Firefox and Chrome still provide minimal animations (e.g., tab loading spinners) to indicate progress. In SPAs, where we rely on custom loading indicators like mat-progress-bar, the absence of any animation severely impacts UX.

---

Expected Behavior

When prefers-reduced-motion: reduce is active, the mat-progress-bar and mat-progress-spinner components in indeterminate mode should support a minimal, non-intrusive animation to maintain their role as activity indicators. For example:

• mat-progress-bar: A subtle bar movement or pulsation, avoiding abrupt transitions.
• mat-progress-spinner: A slow rotation or pulsation instead of complete animation disablement.

Additionally, developers should be able to opt-in to minimal animations via:

• Module configuration (MatProgressBarModule, MatProgressSpinnerModule)
• Token-based control (e.g., MATERIAL_ANIMATIONS)

---

Steps to Reproduce

1. Enable the prefers-reduced-motion setting in Windows 10:

   • Go to Settings → Ease of Access → Display
   • Turn off "Show animations in Windows"

2. Create an Angular application using Angular Material 20.

3. Add a mat-progress-bar or mat-progress-spinner in indeterminate mode:

   <mat-progress-bar mode="indeterminate"></mat-progress-bar>
   <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
   

4. Open the app in a browser (e.g., Firefox).

5. Observe that both components are completely static, even during ongoing tasks.

---

Actual Result

With prefers-reduced-motion: reduce enabled, animations for mat-progress-bar and mat-progress-spinner in indeterminate mode are fully disabled, causing the interface to appear unresponsive or frozen.

---

Expected Result

These components should display a minimal, accessibility-compliant animation to indicate ongoing activity (e.g., slow movement or pulsation), rather than being completely static.

---

Environment

• Angular Material: 20.0.1
• Angular: 20.0.0
• Browser: Firefox (latest), Chrome (latest)
• OS: Windows 10
• prefers-reduced-motion: reduce (enabled manually)

---

Additional Information

• This issue is reproducible on the Angular Material docs site (material.angular.dev).
• Attempts to override the behavior via CSS or the MATERIAL_ANIMATIONS token were unsuccessful.
• Even in prefers-reduced-motion mode, browsers show minimal tab loading animations, emphasizing the need for similar UX in SPAs.
• Possibly related PR: #30796 — automatic handling of prefers-reduced-motion.

---

Proposal

• ✅ Implement a minimal, non-intrusive animation for mat-progress-bar and mat-progress-spinner in indeterminate mode when prefers-reduced-motion: reduce is active.
• ✅ Provide a configuration option (e.g., via module or DI token) to enable minimal animations under prefers-reduced-motion.
• ✅ Document this behavior clearly in the Angular Material documentation and offer guidance for customization.

Use Case

No response