PreloaderBar

The brand bar strip as a loader. Bars grow from their edge in a wave, or fill to a fraction.

Sweep

With no progress the strip loops: bars fill left to right, hold, then empty in the same direction. The motion is one css keyframe with a delay per bar, so nothing runs in javascript after the first paint. Reduced motion draws the strip full and still.

<PreloaderBar />

Reverse and mirrored

reverse runs the wave right to left. mirrored reflects the geometry so two stacked strips offset their seams, the way the homepage weave does.

<PreloaderBar direction="reverse" />
<PreloaderBar direction="reverse" mirrored />

Progress

A number from 0 to 1 draws the strip up to that fraction. The bar straddling the value is partly drawn, and the host speaks the value as a progressbar.

<PreloaderBar progress={0.5} label="Uploading" />

Tones

Ink is the default on light grounds. Inverse ink sits on a foreground ground. current inherits the parent's color.

<Box backgroundColor="foreground" padding="4">
  <PreloaderBar tone="inverse" />
</Box>

Stacks

Rows butt against each other and alternate mirroring. Only the outer element should carry the progressbar role, so rows are decorative.

<Box flexDirection="column" width={320}>
  <PreloaderBar mirrored decorative />
  <PreloaderBar decorative />
  <PreloaderBar mirrored decorative />
</Box>

Props

PreloaderBar is a div. Every div attribute passes through.

progressnumber

0 to 1 draws the strip up to that fraction and holds it. Leave it out for the indeterminate sweep.

directionPreloaderDirectiondefault: 'forward'

Which way the sweep travels, and which edge a bar grows from.

tonePreloaderTonedefault: 'ink'

Ink on light grounds, inverse ink for a foreground ground, current inherits.

mirroredbooleandefault: false

Reflect the strip so a stacked neighbour's seams offset.

intervalsBarIntervalsdefault: BAR_INTERVALS

Bar geometry as [start, end] fractions. The brand strip by default.

staggernumberdefault: 0.02

Seconds between one bar starting and the next.

periodnumberdefault: 2

Seconds for one sweep cycle, or the progress transition.

delaynumberdefault: 0

Seconds before the first bar starts. Stacks use it to chase rows.

heightstring | number

Height override. By default the height tracks the width at the strip's own ratio.

labelstringdefault: 'Loading'

The accessible name when this strip is the page's progress indicator.

decorativebooleandefault: false

Hide the strip from assistive tech, for rows inside a stack.