Skip to content

Commit

Permalink
docs(spinners): add reduced motion callout and mention slowing down i…
Browse files Browse the repository at this point in the history
…n accessibility page
  • Loading branch information
ffoodd committed Oct 15, 2020
1 parent 7a30d24 commit 9d405db
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 1 deletion.
4 changes: 4 additions & 0 deletions site/content/docs/5.0/components/spinners.md
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.0/getting-started/accessibility.md
Expand Up @@ -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—or slowed down when animation is meaningful, such as in spinners.

## Additional resources

Expand Down

0 comments on commit 9d405db

Please sign in to comment.