diff options
| author | Gaël Poupard <[email protected]> | 2020-10-19 11:42:19 +0300 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2020-10-27 12:11:01 +0200 |
| commit | 4b30fe622cf56db72b4515aed0e06377208ecd9d (patch) | |
| tree | d80e2f94a2e3364bb63205f41f90e6c88e667bc1 | |
| parent | efabff3a7422b198da45303d8f129e05df6926e6 (diff) | |
| download | bootstrap-4b30fe622cf56db72b4515aed0e06377208ecd9d.tar.xz bootstrap-4b30fe622cf56db72b4515aed0e06377208ecd9d.zip | |
Backport #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 <[email protected]>
Co-authored-by: Patrick H. Lauke <[email protected]>
| -rw-r--r-- | scss/_spinners.scss | 9 | ||||
| -rw-r--r-- | site/docs/4.5/components/spinners.md | 2 | ||||
| -rw-r--r-- | site/docs/4.5/getting-started/accessibility.md | 2 |
3 files changed, 12 insertions, 1 deletions
diff --git a/scss/_spinners.scss b/scss/_spinners.scss index 146c82067..00bb01784 100644 --- a/scss/_spinners.scss +++ b/scss/_spinners.scss @@ -54,3 +54,12 @@ width: $spinner-width-sm; height: $spinner-height-sm; } + +@if $enable-prefers-reduced-motion-media-query { + @media (prefers-reduced-motion: reduce) { + .spinner-border, + .spinner-grow { + animation-duration: 1.5s; + } + } +} diff --git a/site/docs/4.5/components/spinners.md b/site/docs/4.5/components/spinners.md index c16594572..fe1a91ce7 100644 --- a/site/docs/4.5/components/spinners.md +++ b/site/docs/4.5/components/spinners.md @@ -12,6 +12,8 @@ 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="sr-only">Loading...</span>`. +{% include callout-info-prefersreducedmotion.md %} + ## Border spinner Use the border spinners for a lightweight loading indicator. diff --git a/site/docs/4.5/getting-started/accessibility.md b/site/docs/4.5/getting-started/accessibility.md index 8f78112b7..62675c963 100644 --- a/site/docs/4.5/getting-started/accessibility.md +++ b/site/docs/4.5/getting-started/accessibility.md @@ -45,7 +45,7 @@ For visually hidden interactive controls, such as traditional "skip" links, `.sr ### 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 |