diff options
| author | Gaël Poupard <ffoodd@users.noreply.github.com> | 2020-10-19 11:42:19 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-10-19 11:42:19 +0300 |
| commit | ece40bcd110c47478fa1316bd099ba59210a231b (patch) | |
| tree | d1350fe1b32ebe39f597ef5d324a512643987dee /site/content | |
| parent | e0a3b7ef0d529411c4d4e4c7d1831f2152e49252 (diff) | |
Slow down spinners when `prefers-reduced-motion: reduce` (#31882)
* feature(spinners): slow down spinners when prefers-reduced-motion
* docs(spinners): add reduced motion callout and mention slowing down in accessibility page
* Update spinners.md
* docs(accessibility): rewording
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Diffstat (limited to 'site/content')
| -rw-r--r-- | site/content/docs/5.0/components/spinners.md | 4 | ||||
| -rw-r--r-- | site/content/docs/5.0/getting-started/accessibility.md | 2 |
2 files changed, 5 insertions, 1 deletions
diff --git a/site/content/docs/5.0/components/spinners.md b/site/content/docs/5.0/components/spinners.md index fc9cd4e57a..250e334b83 100644 --- a/site/content/docs/5.0/components/spinners.md +++ b/site/content/docs/5.0/components/spinners.md @@ -12,6 +12,10 @@ Bootstrap "spinners" can be used to show the loading state in your projects. The For accessibility purposes, each loader here includes `role="status"` and a nested `<span class="visually-hidden">Loading...</span>`. +{{< callout info >}} +{{< partial "callout-info-prefersreducedmotion.md" >}} +{{< /callout >}} + ## Border spinner Use the border spinners for a lightweight loading indicator. diff --git a/site/content/docs/5.0/getting-started/accessibility.md b/site/content/docs/5.0/getting-started/accessibility.md index 150c80d65c..b32daec733 100644 --- a/site/content/docs/5.0/getting-started/accessibility.md +++ b/site/content/docs/5.0/getting-started/accessibility.md @@ -45,7 +45,7 @@ For visually hidden interactive controls, such as traditional "skip" links, use ### Reduced motion -Bootstrap includes support for the [`prefers-reduced-motion` media feature](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled. +Bootstrap includes support for the [`prefers-reduced-motion` media feature](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down. ## Additional resources |