Do not animate progress bar when user prefers reduced motion #9054

smith · 2025-09-23T18:35:19Z

Summary

When the user settings request reduced motion, the EUI progress component does not respect this setting. Fix this by only animating it when reduced motion is not requested.

Why are we making this change?

The prefers-reduced-motion media feature detects whether a user has requested reduced animations. The can be because of vestibular disorders, or maybe they just prefer not to see the page light up like a slot machine every time you request more data.

Screenshots #

Impact to users

If no preference for reduced motion: No change
If prefers reduced motion: Shows a static bar instead of a moving one

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

weronikaolejniczak · 2025-09-25T10:08:53Z

.github/actions/check-changelog/entrypoint.sh

Hey @smith could we drop this change? 😄 It will conflict with our changelog CI check: #9041

What's the reason for this change?

Sorry I had a note about this that I meant to add to the PR description but didn't get saved: When you follow the link from GitHub to the action, then see the output, and click on the link, GitHub automatically includes the trailing ".", so you end up at a 404 page.

I can remove this change if you need me to.

That's a good catch! I think you could drop it and it can be updated on: #9041

weronikaolejniczak

This is a fantastic change, thank you for contributing, @smith! 🙌🏻

If the progress bar is in indeterminate state, there still should be some loading indication, right? @alexwizp @bhavyarm

packages/eui/src/components/progress/progress.styles.ts

alexwizp · 2025-09-25T11:31:10Z

I vote in case of prefers-reduced-motion: reduce have something like instead of just a 100% green line

smith · 2025-09-25T13:44:31Z

I vote in case of prefers-reduced-motion: reduce have something like instead of just a 100% green line

@alexwizp what percentage are you showing there?

alexwizp · 2025-09-25T15:18:50Z

I see that as 21%

elasticmachine · 2025-09-26T03:20:17Z

💚 Build Succeeded

History

💚 Build #1385 succeeded 2625d56
💚 Build #1384 succeeded 2bc5d3c
💚 Build #1341 succeeded 8ad9a12
💚 Build #1340 succeeded aef05f5
💚 Build #1332 succeeded 0fd44c9

elasticmachine · 2025-09-26T03:34:20Z

💚 Build Succeeded

Buildkite Build
Commit: 9e9e24c

History

💚 Build #4790 succeeded 8ad9a12
💚 Build #4789 succeeded aef05f5
💚 Build #4784 succeeded 0fd44c9

weronikaolejniczak

@smith I love the striped version 👍🏻 it gives a sense of motion without actual motion, and it doesn't look like determinate loading. Thank you for cleaning up the code! 🟢 From my side it's good to go but I'd love to hear what @JoseLuisGJ @ek-so have to say. If we can proceed with this.

ek-so · 2025-09-26T08:54:52Z

Hey @weronikaolejniczak @smith thank you! Just to be clear: we propose to have no animation at all, just a striped static line, right? (I'm asking because on the screenshot I see that there's first an animation, and only then the stripe appears).

I'm generally ok with this. And then we should probably apply the same approach to the spinner, i.e. make it a static picture that looks like it's spinning (for example like this, approximately).

weronikaolejniczak · 2025-09-26T09:10:54Z

@ek-so that's right, Kate! On the gif Nathan is toggling between the "Reduce motion" preference to show that it works. That's why it changes from an animation to the stripes and back.

As for the spinner, could you create a design ticket for this with how it should look like? 🙏🏻

- `@elastic/eui`: `v106.6.0` ⏩ `v106.7.0` - `@elastic/eui-theme-borealis`: `v3.4.0` ⏩ `v3.5.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - replaced usages of `EuiButtonEmpty` in Discover `change_dataview` and `EuiFilterButton` in Dashboard `options_list_control `with the newly added `EuiFormControlButton` component to ensure cohesive form layout styling (EUI [#9006](elastic/eui#9006)) **Discover** | before | after | |---|---| | <img width="434" height="369" alt="Screenshot 2025-10-07 at 22 13 23" src="https://github.com/user-attachments/assets/488984a0-a6a1-488e-8db5-588c84be6765" /> | <img width="418" height="365" alt="Screenshot 2025-10-07 at 22 20 16" src="https://github.com/user-attachments/assets/16164d3f-0b8d-4ceb-a971-a10a6d1f5aee" /> | | <img width="432" height="371" alt="Screenshot 2025-10-07 at 22 12 39" src="https://github.com/user-attachments/assets/37fd32f5-6d15-459d-9e14-776a671b7fd6" /> | <img width="423" height="372" alt="Screenshot 2025-10-07 at 22 21 16" src="https://github.com/user-attachments/assets/846eb3f6-7d39-4c6e-9e22-42b694f9a276" /> | **Dashboard** | before | after | |---|---| | <img width="475" height="288" alt="Screenshot 2025-10-07 at 22 13 13" src="https://github.com/user-attachments/assets/4ff88734-18d7-456a-991d-ba491550a4dd" /> | <img width="432" height="292" alt="Screenshot 2025-10-07 at 17 44 25" src="https://github.com/user-attachments/assets/6e97337f-11e6-4213-a80b-5424dcb3ee38" /> | | <img width="475" height="289" alt="Screenshot 2025-10-07 at 22 12 51" src="https://github.com/user-attachments/assets/dcbd1470-8bdd-453a-8fc0-20da26bc3e27" /> | <img width="471" height="288" alt="Screenshot 2025-10-07 at 21 44 36" src="https://github.com/user-attachments/assets/7f2c5b10-44cf-4efc-a902-dd72889b3043" /> | ## Package updates ## [`v106.7.0`](https://github.com/elastic/eui/releases/v106.7.0) - Updated `EuiComboBox` to properly break long strings without spaces when `rowHeight="auto"` ([#9063](elastic/eui#9063)) - Added `data-test-subj` support to `EuiDatePicker` and `EuiDatePickerRange` for improved testability. Propagates to main component wrappers, inputs, clear buttons, calendar navigation, and popover panels. ([#9042](elastic/eui#9042)) - Added `streamsClassic` and `streamsWired` icons ([#9017](elastic/eui#9017)) - Updated icons based on feedback: `boxesVertical`, `documentation`, `error`, `export`, `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `grab`, `grabOmnidirectional`, `grabHorizontal`, `importAction`, `indexTemporary`, `link`, `list`, `magnifyWithExclamation`, `magnifyWithMinus`, `magnifyWithPlus`, `minus`, `minusInCircle`, `pencil`, `pin`, `pinFilled`, `plus`, `plusInCircle`, `question`, `search`, `sortLeft`, `sortRight`, `sortDown`, `sortUp`, `sortable`, `unlink`. ([#9026](elastic/eui#9026)) - Added new icon: `backgroundTask`. ([#9026](elastic/eui#9026)) - Marked icons for deprecation: `boxesHorizontal`, `checkInCircleFilled`, `copyClipboard`, `documentEdit`, `errorFilled`, `expandMini`, `filterInCircle`, `lettering`, `listAdd`, `minusInCircleFilled`, `newChat`, `playFilled`, `plusInCircleFilled`, `submodule`, `tableDensityNormal`, `warningFilled`. ([#9026](elastic/eui#9026)) - Added `workflowsApp` icon ([#9011](elastic/eui#9011)) - Added `EuiFormControlButton` component for usage as input-styled button within `EuiFormControlLayout` ([#9006](elastic/eui#9006)) - Updated `EuiSuperDatePicker` to use `EuiFormControlButton` when a prettified duration button is rendered ([#9006](elastic/eui#9006)) **Bug fixes** - Fixed `EuiInMemoryTable` not firing the `search.onChange` callback when `searchFormat` equals `text`. ([#9059](elastic/eui#9059)) - Fixed `columns` in `EuiDataGrid` not being rendered in the correct order as defined by `columnVisibility.visibleColumns` which resulted in unexpected updates when reordering columns ([#9030](elastic/eui#9030)) **Accessibility** - Improved color contrast of non-interactive `EuiBreadcrumbs` items in dark mode ([#9071](elastic/eui#9071)) - Make `EuiProgress` respect user's reduced motion setting by not animating when in indeterminite state. ([#9054](elastic/eui#9054)) ### `@elastic/eui-theme-borealis` ## [`v3.5.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v350) - Updated color value of `textSubdued` and legacy `subduedText` in dark mode from `#8E9FBC` to `#98A8C3` ([#9071](elastic/eui#9071)) **Bug fixes** - Fixed values of `$euiFormBackground` and `$euiFormBackgroundReadOnlyColor` to match JS tokens ([#9067](elastic/eui#9067)) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

- `@elastic/eui`: `v106.6.0` ⏩ `v106.7.0` - `@elastic/eui-theme-borealis`: `v3.4.0` ⏩ `v3.5.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - replaced usages of `EuiButtonEmpty` in Discover `change_dataview` and `EuiFilterButton` in Dashboard `options_list_control `with the newly added `EuiFormControlButton` component to ensure cohesive form layout styling (EUI [elastic#9006](elastic/eui#9006)) **Discover** | before | after | |---|---| | <img width="434" height="369" alt="Screenshot 2025-10-07 at 22 13 23" src="https://github.com/user-attachments/assets/488984a0-a6a1-488e-8db5-588c84be6765" /> | <img width="418" height="365" alt="Screenshot 2025-10-07 at 22 20 16" src="https://github.com/user-attachments/assets/16164d3f-0b8d-4ceb-a971-a10a6d1f5aee" /> | | <img width="432" height="371" alt="Screenshot 2025-10-07 at 22 12 39" src="https://github.com/user-attachments/assets/37fd32f5-6d15-459d-9e14-776a671b7fd6" /> | <img width="423" height="372" alt="Screenshot 2025-10-07 at 22 21 16" src="https://github.com/user-attachments/assets/846eb3f6-7d39-4c6e-9e22-42b694f9a276" /> | **Dashboard** | before | after | |---|---| | <img width="475" height="288" alt="Screenshot 2025-10-07 at 22 13 13" src="https://github.com/user-attachments/assets/4ff88734-18d7-456a-991d-ba491550a4dd" /> | <img width="432" height="292" alt="Screenshot 2025-10-07 at 17 44 25" src="https://github.com/user-attachments/assets/6e97337f-11e6-4213-a80b-5424dcb3ee38" /> | | <img width="475" height="289" alt="Screenshot 2025-10-07 at 22 12 51" src="https://github.com/user-attachments/assets/dcbd1470-8bdd-453a-8fc0-20da26bc3e27" /> | <img width="471" height="288" alt="Screenshot 2025-10-07 at 21 44 36" src="https://github.com/user-attachments/assets/7f2c5b10-44cf-4efc-a902-dd72889b3043" /> | ## Package updates ## [`v106.7.0`](https://github.com/elastic/eui/releases/v106.7.0) - Updated `EuiComboBox` to properly break long strings without spaces when `rowHeight="auto"` ([elastic#9063](elastic/eui#9063)) - Added `data-test-subj` support to `EuiDatePicker` and `EuiDatePickerRange` for improved testability. Propagates to main component wrappers, inputs, clear buttons, calendar navigation, and popover panels. ([elastic#9042](elastic/eui#9042)) - Added `streamsClassic` and `streamsWired` icons ([elastic#9017](elastic/eui#9017)) - Updated icons based on feedback: `boxesVertical`, `documentation`, `error`, `export`, `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `grab`, `grabOmnidirectional`, `grabHorizontal`, `importAction`, `indexTemporary`, `link`, `list`, `magnifyWithExclamation`, `magnifyWithMinus`, `magnifyWithPlus`, `minus`, `minusInCircle`, `pencil`, `pin`, `pinFilled`, `plus`, `plusInCircle`, `question`, `search`, `sortLeft`, `sortRight`, `sortDown`, `sortUp`, `sortable`, `unlink`. ([elastic#9026](elastic/eui#9026)) - Added new icon: `backgroundTask`. ([elastic#9026](elastic/eui#9026)) - Marked icons for deprecation: `boxesHorizontal`, `checkInCircleFilled`, `copyClipboard`, `documentEdit`, `errorFilled`, `expandMini`, `filterInCircle`, `lettering`, `listAdd`, `minusInCircleFilled`, `newChat`, `playFilled`, `plusInCircleFilled`, `submodule`, `tableDensityNormal`, `warningFilled`. ([elastic#9026](elastic/eui#9026)) - Added `workflowsApp` icon ([elastic#9011](elastic/eui#9011)) - Added `EuiFormControlButton` component for usage as input-styled button within `EuiFormControlLayout` ([elastic#9006](elastic/eui#9006)) - Updated `EuiSuperDatePicker` to use `EuiFormControlButton` when a prettified duration button is rendered ([elastic#9006](elastic/eui#9006)) **Bug fixes** - Fixed `EuiInMemoryTable` not firing the `search.onChange` callback when `searchFormat` equals `text`. ([elastic#9059](elastic/eui#9059)) - Fixed `columns` in `EuiDataGrid` not being rendered in the correct order as defined by `columnVisibility.visibleColumns` which resulted in unexpected updates when reordering columns ([elastic#9030](elastic/eui#9030)) **Accessibility** - Improved color contrast of non-interactive `EuiBreadcrumbs` items in dark mode ([elastic#9071](elastic/eui#9071)) - Make `EuiProgress` respect user's reduced motion setting by not animating when in indeterminite state. ([elastic#9054](elastic/eui#9054)) ### `@elastic/eui-theme-borealis` ## [`v3.5.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v350) - Updated color value of `textSubdued` and legacy `subduedText` in dark mode from `#8E9FBC` to `#98A8C3` ([elastic#9071](elastic/eui#9071)) **Bug fixes** - Fixed values of `$euiFormBackground` and `$euiFormBackgroundReadOnlyColor` to match JS tokens ([elastic#9067](elastic/eui#9067)) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

smith added 3 commits September 23, 2025 13:22

Do not animate progress bar when user prefers reduced motion

b04a9bb

remove comment

18ec7b2

fix empty line

88944b6

smith marked this pull request as ready for review September 23, 2025 18:40

smith requested a review from a team as a code owner September 23, 2025 18:40

smith added 5 commits September 23, 2025 13:40

Merge branch 'main' into nls/progress-animate

0fd44c9

add changelog and fix changelog script

cf84aa4

add changelog and fix changelog script

696af6e

Merge remote-tracking branch 'upstream/main' into nls/progress-animate

aef05f5

move changelog entry

8ad9a12

weronikaolejniczak self-requested a review September 25, 2025 06:30

weronikaolejniczak reviewed Sep 25, 2025

View reviewed changes

packages/eui/src/components/progress/progress.styles.ts Outdated Show resolved Hide resolved

weronikaolejniczak mentioned this pull request Sep 25, 2025

chore(workflows): run changelog check in CI for every public package #9041

Open

smith added 4 commits September 25, 2025 21:20

Merge remote-tracking branch 'upstream/main' into nls/progress-animate

5ee0cc9

undo change to entrypoint

2bc5d3c

try stripes

2625d56

use theme size vars

9e9e24c

weronikaolejniczak approved these changes Sep 26, 2025

View reviewed changes

weronikaolejniczak merged commit b3a1841 into elastic:main Sep 26, 2025
5 checks passed

mgadewoll added a commit that referenced this pull request Oct 2, 2025

test(vrt): update reference images for #9054

c362f05

acstll mentioned this pull request Oct 6, 2025

Upgrade EUI to v106.7.0 elastic/kibana#237661

Merged

smith mentioned this pull request Oct 13, 2025

[EuiBasicTable] Do not animate loading bar when user prefers reduced motion #9095

Merged

13 tasks

tsullivan pushed a commit that referenced this pull request Oct 15, 2025

Do not animate progress bar when user prefers reduced motion (#9054)

9d5c431

Do not animate progress bar when user prefers reduced motion #9054

Do not animate progress bar when user prefers reduced motion #9054

Uh oh!

Conversation

smith commented Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

weronikaolejniczak Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

smith Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexwizp commented Sep 25, 2025

Uh oh!

smith commented Sep 25, 2025

Uh oh!

alexwizp commented Sep 25, 2025

Uh oh!

elasticmachine commented Sep 26, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Sep 26, 2025

💚 Build Succeeded

History

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

ek-so commented Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

weronikaolejniczak commented Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

smith commented Sep 23, 2025 •

edited

Loading

ek-so commented Sep 26, 2025 •

edited

Loading

weronikaolejniczak commented Sep 26, 2025 •

edited

Loading