FauxProgress

Faux Progress is used to display simulated progress status for a task that takes a long time.

React

import { FauxProgress } from '@hoverinc/design-system-react-web';

value

Pass value to override the faux progress and manually control progress

() => {
  return (
    <Stack direction="row" spacing="300" width="300px">
      <FauxProgress isLoading={true} value={74} />
    </Stack>
  );
};

isLoading and duration

Pass isLoading and optionally pass a duration value.

() => {
  return (
    <Stack direction="row" spacing="300" width="300px">
      <FauxProgress isLoading={true} duration={10} />
    </Stack>
  );
};

Callbacks

There are some callback props that the component accepts

You can add onProgress prop and on onComplete prop to get current progress and completion callback

<Stack spacing="300" width="300px">
  <FauxProgress onProgress={console.log} />
  <FauxProgress isLoading={false} onComplete={() => console.log('complete!')} />
</Stack>

Color mode

By default, Progress uses the color mode context to determine whether to display a dark or light placeholder animation. Pass colorMode to manually force a color mode.

<Stack spacing="300" width="300px">
  <Stack padding="500" background="neutral.0">
    <FauxProgress colorMode="light" value={50} />
  </Stack>
  <Stack padding="500" background="neutral.875">
    <FauxProgress colorMode="dark" value={50} />
  </Stack>
</Stack>

Accessibility

FauxProgress has a role set to progressbar to denote that it is a progress.

Dropdown

Field