Example of Loader - default
<BcLoader resource='Loading Resource' />
React documentation
Last modified:
Use a Loader animation to indicate the user should wait for a user interface action to complete (eg the loading of dynamic search query results).
BcLoader Props
Prop | Type | Required? | Default | Description |
---|---|---|---|---|
resource | string | required | Shows the text in loader. |
HTML
Last modified:
Add .bc-loader
to a <div>
element.
Design
Last modified:
Use a Loader animation to indicate the user should wait for a user interface action to complete (eg. the loading of dynamic search query results).
Accessibility
Last modified:
Use ARIA live regions to announce the loading states:
- Provide the visually-hidden status text a meaningful message (eg “Duplicate search results loading…”)
- Use
role="alert"
andaria-live="assertive"
attributes on the Loader’s container - On the container of the content (or interface) that is currently loading, add:
aria-live="polite"
- toggle:
aria-busy="true"
for content that is currently loading;false
for content that has loaded.
Rationale
Last modified:
- Place the animation in visual proximity to the triggering UI element or would-be content space.
- Use a single Loader at a time.
- The animation should gracefully disappear when the action is complete.
See also
Last modified:
- Progress Bars
- Skeleton (coming soon)