microsoft · tomi-msft · Nov 7, 2022 · Nov 7, 2022 · Nov 7, 2022
diff --git a/change/@fluentui-react-progress-a07a5cfc-ad88-4e76-a0ff-6f8e69c30c66.json b/change/@fluentui-react-progress-a07a5cfc-ad88-4e76-a0ff-6f8e69c30c66.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add styling and documentation for reduced-motion",
+  "packageName": "@fluentui/react-progress",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
@@ -121,3 +121,4 @@ The Progress is non-interactive.
 ## Accessibility
 
 - The `determinate` Progress has the proper `aria` attributes assigned to the element that will allow screen readers to get the `max` and current `value` of the `Progress`.
+- When `reduced-motion` is active, the `indeterminate` `Progress` will animate only once. Use `ProgressField` to add a `description` and `hint` message to the `Progress` bar.
@@ -98,6 +98,10 @@ const useBarStyles = makeStyles({
     animationName: indeterminateProgress,
     animationDuration: '3s',
     animationIterationCount: 'infinite',
+    '@media screen and (prefers-reduced-motion: reduce)': {
+      animationDuration: '0.01ms',
+      animationIterationCount: '1',
+    },
   },
 
   rtl: {

@@ -6,6 +6,7 @@
 - Display operation description
 - Show text above and/or below the bar
 - Combine steps of a single operation into one bar
+- Use `ProgressField` to add a `description` and `hint` message for the `indeterminate` `Progress` when `reduced-motion` is active
 
 ### Don't
Original file line number	Diff line number	Diff line change
Expand Up		@@ -121,3 +121,4 @@ The Progress is non-interactive.
		## Accessibility

		- The `determinate` Progress has the proper `aria` attributes assigned to the element that will allow screen readers to get the `max` and current `value` of the `Progress`.
		- When `reduced-motion` is active, the `indeterminate` `Progress` will animate only once. Use `ProgressField` to add a `description` and `hint` message to the `Progress` bar.