rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-12 09:54:25 +01:00
Code Issues Actions Packages Releases Activity

Slow down spinners when prefers-reduced-motion: reduce (#31882)

Browse Source 
* 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>
This commit is contained in:
Gaël Poupard 2020-10-19 10:42:19 +02:00 committed by GitHub
parent e0a3b7ef0d
commit ece40bcd11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
scss/_spinners.scss
View File

@ -54,3 +54,12 @@
width: $spinner-width-sm; width: $spinner-width-sm;
height: $spinner-height-sm; height: $spinner-height-sm;
} }
@if $enable-reduced-motion {
@media (prefers-reduced-motion: reduce) {
.spinner-border,
.spinner-grow {
animation-duration: $spinner-animation-speed * 2;
}
}
}

4
site/content/docs/5.0/components/spinners.md
View File

@ -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>`. 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 ## Border spinner
Use the border spinners for a lightweight loading indicator. Use the border spinners for a lightweight loading indicator.

2
site/content/docs/5.0/getting-started/accessibility.md
View File

@ -45,7 +45,7 @@ For visually hidden interactive controls, such as traditional "skip" links, use
### Reduced motion ### 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 ## Additional resources