Search/

Loader

Last modified:

A loading animation and hidden status message used to notify users that their action is being processed.

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

PropTypeRequired?DefaultDescription
resourcestringrequiredShows 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:

  1. Provide the visually-hidden status text a meaningful message (eg “Duplicate search results loading…”)
  2. Use role="alert" and aria-live="assertive" attributes on the Loader’s container
  3. 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: