Usage guidance
Ideally, no more than one Loader should be visible on a single page at a time. For contexts where multiple areas have content that needs loading (such as on page load), a form of skeleton loading should be used and the Loader as an overlay for the page/container.
The Loader will behave responsively to its' parent container, but a custom size can also be provided using the height or width property. Please note, both properties should not be provided together as this will break the responsive scaling behavior. The size of the Loader should also not fill the entire container.
Accessibility
An aria-label should be provided for screen reader context and aria-live/aria-busy or the appropriate role for sections that are dynamically modified as a result of a loading task or triggered by the loading state.
Best practices
Examples
Basic usage
Custom size
Advanced accessibility
Click the button below to load new content and notify the screen reader of these changes, using aria-live.
Props
Loader
In addition to the props listed below, Loader accepts all props from React.HTMLAttributes<SVGElement>.
| Name | Type | Description |
|---|---|---|
aria-labelRequired | string | Accessible label describing the context in which the Loader is used. |
inverted | boolean | Sets the style of the Loader suitable for dark backgrounds. Default:
DEPRECATED Will be removed in |
Imports
You can import the following components, utilities or types from this module:
import { Loader } from '@datacamp/waffles/loader';import type { LoaderProps } from '@datacamp/waffles/loader';