diff --git a/scss/_spinners.scss b/scss/_spinners.scss index 9e083eae1b..99335544e5 100644 --- 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 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 `Loading...`. +{{< 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