ActivityIndicator
- Library
- UDS Base
- Repository
- github.com/telus/universal-design-system
- Package
- npmjs.com/package/@telus-uds/components-base
- Package version
- 1.6.1
Loading...
Introduction
import { ActivityIndicator } from '@telus-uds/components-base'
ActivityIndicator can be used to show a visual loading state.
Guidance
- Avoid using an ActivityIndicator whenever possible. Make content available to the user as soon as possible
- User feedback should be present when a user action takes longer than 0.1 seconds
- An ActivityIndicator is most appropriate for providing feedback for actions that last between 2 and 10 seconds
- Actions that take longer than 10 seconds ideally provide feedback with relative progress, such as a progress bar
- Recommend not to use for full page loading
- Use the large spinner when affecting an entire content block, whose content has not finished loading, such as paginated content
Accessibility
When using an ActivityIndicator ensure that you provide a label prop to explain what is happening to assistive technologies.
If you are using an ActivityIndicator as a placeholder until content either arrives or changes, ensure that you are using an aria-live region or appropriate role on the parent.
Platform considerations
ActivityIndicator uses a platform-native animation on each platform and does not block on the main javascript thread on any platform.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | objectOf | System variant prop, see variants for more details | |
| tokens | custom | System tokens prop, see tokens for more details | |
| label* | string | A visually hidden accessible label describing the action taking place |