diff --git a/change/@fluentui-react-progress-4314d015-0a93-40af-abb9-0fa3d9ec86cb.json b/change/@fluentui-react-progress-4314d015-0a93-40af-abb9-0fa3d9ec86cb.json new file mode 100644 index 00000000000000..8f68e0e13ab126 --- /dev/null +++ b/change/@fluentui-react-progress-4314d015-0a93-40af-abb9-0fa3d9ec86cb.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: add subtle animation for indeterminate progress bar when reduced motion mode is enabled", + "packageName": "@fluentui/react-progress", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts b/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts index 75d46c9097e555..2053cbc6649dfe 100644 --- a/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts +++ b/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts @@ -26,6 +26,18 @@ const indeterminateProgressBar = { }, }; +const indeterminateProgressBarReducedMotion = { + '0%': { + opacity: '.2', + }, + '50%': { + opacity: '1', + }, + '100%': { + opacity: '.2', + }, +}; + /** * Styles for the root slot */ @@ -84,8 +96,10 @@ const useBarStyles = makeStyles({ animationTimingFunction: 'linear', animationIterationCount: 'infinite', '@media screen and (prefers-reduced-motion: reduce)': { - animationDuration: '0.01ms', - animationIterationCount: '1', + maxWidth: '100%', + animationIterationCount: 'infinite', + animationDuration: '3s', + animationName: indeterminateProgressBarReducedMotion, }, },