From 4b30fe622cf56db72b4515aed0e06377208ecd9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <ffoodd@users.noreply.github.com>
Date: Mon, 19 Oct 2020 11:42:19 +0300
Subject: [PATCH] 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 <xhmikosr@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
---
scss/_spinners.scss | 9 +++++++++
site/docs/4.5/components/spinners.md | 2 ++
site/docs/4.5/getting-started/accessibility.md | 2 +-
3 files changed, 12 insertions(+), 1 deletion(-)
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index 146c820675..00bb01784f 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 c165945727..fe1a91ce7c 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 8f78112b71..62675c9635 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
--
GitLab