IndeterminateLoader

import {Container, Flex, Stack} from '@sentry/scraps/layout'; import {Text} from '@sentry/scraps/text'; import {IndeterminateLoader} from '@sentry/scraps/loader';

import {Demo} from 'sentry/stories/demo';

export const documentation = import('!!type-loader!@sentry/scraps/loader');

The IndeterminateLoader renders a repeating squiggle pattern with an animated color wipe to indicate indeterminate loading progress. It fills 100% of its parent's width.

Usage

<IndeterminateLoader />

Messages

Pass an array of messages to step through loading messages as the loader runs.

<IndeterminateLoader
  messages={['Doing the first thing', 'Doing the second thing', 'Doing the third thing']}
/>

Contained Width

Constrain the loader's width by wrapping it in a sized container.

<Container style={{width: 120}}>
  <IndeterminateLoader />
</Container>

<Container style={{width: 240}}>
  <IndeterminateLoader />
</Container>

<IndeterminateLoader />

Monochrome

Use variant="monochrome" to inherit currentColor from the parent. The track renders at 25% opacity and the accent at full opacity.

This is used internally in the Button component.

<Container style={{color: '#7553ff'}}>
  <IndeterminateLoader variant="monochrome" />
</Container>

Accessibility

The component renders with role="progressbar" and a default aria-label of "Loading". Override the label to provide more specific context:

<IndeterminateLoader aria-label="Saving changes" />