Blueprint

GuidesFoundationComponentsReleases
⌘K

ProgressiveLoader

A loading indicator used to convey the state of action that takes longer than a few seconds to complete.

React


import { ProgressiveLoader } from '@hover/blueprint';

A label is required to ensure the Loader is accessible.

live

<ProgressiveLoader label="I'm waiting on something" />

Rows and Columns

Control the amount of bricks in the animation with rows and columns.

live

<ProgressiveLoader rows={8} columns={4} />

Delay

Customize the delay between the bricks dropping with brickDelay and brickDelayVariation.

live

<ProgressiveLoader
brickDelay={1.25}
brickDelayVariation={2}
rows={7}
columns={4}
/>

Captions

Pass an array of captions to be cycled through as the loader animates.

live

<ProgressiveLoader
captions={[
'Checking property measurements',
'Gathering all the details to present your materials',
'Checking available options',
'Say goodbye to number crunching...',
"because we're creating a material list!",
]}
captionDuration={3000}
label="Creating material list"
/>

Custom Bricks

Use the brickSpacing and brickProps props to customize the appearance of the animated bricks.

live

<ProgressiveLoader
label="I'm waiting on something"
brickSpacing="-3px"
brickProps={{
bg: 'transparent',
borderWidth: '3px',
borderRadius: '300',
}}
/>