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>

diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index 9e083eae1b0d5bcb16da121f9eafe4630e64fb80..99335544e5f29878ea2fc317b15245ffd2e32aa9 100644 (file)
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -54,3 +54,12 @@
   width: $spinner-width-sm;
   height: $spinner-height-sm;
 }
+
+@if $enable-reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    .spinner-border,
+    .spinner-grow {
+      animation-duration: $spinner-animation-speed * 2;
+    }
+  }
+}

diff --git a/site/content/docs/5.0/components/spinners.md b/site/content/docs/5.0/components/spinners.md
index fc9cd4e57ab9d35482c1cb4a1498238e14884537..250e334b8357d8ea492c7a33a01d10627a76c200 100644 (file)
--- 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 150c80d65c29d3f1fb76229f1f6f973d0269b8cc..b32daec7336c6890b60e5ca9f13ff9cd6315db2f 100644 (file)
--- 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