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

Add .bc-loader to a <div> element.

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).

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.

• 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.

• Progress Bars
• Skeleton (coming soon)