fix(material/progress-bar): slow down animations instead of fully stopping them

Reworks the progress bar to slow down its animations, instead of fully stopping them when `prefers-reduced-motion` is enabled. Stopping the animations completely appears to be confusing for users.

Author: crisbeto

src/material/progress-bar/progress-bar.scss

@@ -6,6 +6,8 @@
 $fallbacks: m3-progress-bar.get-tokens();
 
 .mat-mdc-progress-bar {
+  --mat-progress-bar-animation-multiplier: 1;
+
   // Explicitly set to `block` since the browser defaults custom elements to `inline`.
   display: block;
 
@@ -35,6 +37,12 @@ $fallbacks: m3-progress-bar.get-tokens();
   }
 }
 
+// Slow down the animation by 100% when the user configured their OS to reduce
+// motion since some animations like the indeterminate one can be quite dynamic.
+.mat-progress-bar-reduced-motion {
+  --mat-progress-bar-animation-multiplier: 2;
+}
+
 .mdc-linear-progress {
   position: relative;
   width: 100%;
@@ -105,15 +113,17 @@ $fallbacks: m3-progress-bar.get-tokens();
   background-repeat: repeat-x;
   flex: auto;
   transform: rotate(180deg);
-  animation: mdc-linear-progress-buffering 250ms infinite linear;
+  animation: mdc-linear-progress-buffering
+    calc(250ms * var(--mat-progress-bar-animation-multiplier)) infinite linear;
   background-color: token-utils.slot(progress-bar-track-color, $fallbacks);
 
   @include cdk.high-contrast {
     background-color: ButtonBorder;
   }
 
   [dir='rtl'] & {
-    animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;
+    animation: mdc-linear-progress-buffering-reverse
+      calc(250ms * var(--mat-progress-bar-animation-multiplier)) infinite linear;
     transform: rotate(0);
   }
 }
@@ -132,12 +142,14 @@ $fallbacks: m3-progress-bar.get-tokens();
   }
 
   .mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
-    animation: mdc-linear-progress-primary-indeterminate-translate 2s infinite linear;
+    animation: mdc-linear-progress-primary-indeterminate-translate
+      calc(2s * var(--mat-progress-bar-animation-multiplier)) infinite linear;
   }
 
   .mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
     > .mdc-linear-progress__bar-inner {
-      animation: mdc-linear-progress-primary-indeterminate-scale 2s infinite linear;
+      animation: mdc-linear-progress-primary-indeterminate-scale
+        calc(2s * var(--mat-progress-bar-animation-multiplier)) infinite linear;
     }
   }
 
@@ -160,12 +172,14 @@ $fallbacks: m3-progress-bar.get-tokens();
   }
 
   .mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
-    animation: mdc-linear-progress-secondary-indeterminate-translate 2s infinite linear;
+    animation: mdc-linear-progress-secondary-indeterminate-translate
+      calc(2s * var(--mat-progress-bar-animation-multiplier)) infinite linear;
   }
 
   .mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
     > .mdc-linear-progress__bar-inner {
-      animation: mdc-linear-progress-secondary-indeterminate-scale 2s infinite linear;
+      animation: mdc-linear-progress-secondary-indeterminate-scale
+        calc(2s * var(--mat-progress-bar-animation-multiplier)) infinite linear;
     }
   }
 

src/material/progress-bar/progress-bar.ts

@@ -25,7 +25,7 @@ import {
   DOCUMENT,
 } from '@angular/core';
 
-import {_animationsDisabled, ThemePalette} from '../core';
+import {_getAnimationsState, ThemePalette} from '../core';
 
 /** Last animation end data. */
 export interface ProgressAnimationEnd {
@@ -121,10 +121,18 @@ export class MatProgressBar implements AfterViewInit, OnDestroy {
   constructor(...args: unknown[]);
 
   constructor() {
+    const animationsState = _getAnimationsState();
+
     const defaults = inject<MatProgressBarDefaultOptions>(MAT_PROGRESS_BAR_DEFAULT_OPTIONS, {
       optional: true,
     });
 
+    this._isNoopAnimation = animationsState === 'di-disabled';
+
+    if (animationsState === 'reduced-motion') {
+      this._elementRef.nativeElement.classList.add('mat-progress-bar-reduced-motion');
+    }
+
     if (defaults) {
       if (defaults.color) {
         this.color = this._defaultColor = defaults.color;
@@ -135,7 +143,7 @@ export class MatProgressBar implements AfterViewInit, OnDestroy {
   }
 
   /** Flag that indicates whether NoopAnimations mode is set to true. */
-  _isNoopAnimation = _animationsDisabled();
+  _isNoopAnimation: boolean;
 
   // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings.
   /**