ActivityIndicator

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<ActivityIndicator label="fetching products" />

<ActivityIndicator label="fetching products" />

Introduction

import { ActivityIndicator } from '@telus-uds/ds-allium'

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

info

ActivityIndicator is not a direct replacement for TDS' Spinner as it does not handle overlaying child 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

The component is available on both native platforms and web.

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
label*	string		A visually hidden accessible label describing the action taking place
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details

Tokens

In exceptional circumstances, the following tokens can be passed to this component to override its default styles. Do not do this unless absolutely necessary. Read more about overriding styles.

View Tokens

Prop Name	Token Property	Token Type
tokens	size	size
	thickness	border
	color	color

Figma

Variants

Size

Loading...

<StackView space={4}> <ActivityIndicator label="small/default" /> <ActivityIndicator variant={{ size: 'large' }} label="larger" /> </StackView>

<StackView space={4}>
  <ActivityIndicator label="small/default" />
  <ActivityIndicator variant={{ size: 'large' }} label="larger" />
</StackView>

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support