ProgressiveLoader

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

Figma

React

Bootstrap

Native

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',
  }}
/>

Blueprint

Settings

ProgressiveLoader

React

Rows and Columns

Delay

Captions

Custom Bricks