Progress | SparkUI

Install#

npm install @spark-ui/progress

Import#

import { Progress } from "@spark-ui/progress";

Usage#

Default#

<Progress
  aria-label="Loading"
  value={20}
/>

Label#

Use Progress.Label component to display a label for the progress. If this component is used there is not need of passing the aria-label prop.

<div className="flex flex-col gap-lg">
  <Progress
    className="items-start"
    max={100}
    value={20}
  >
    <Progress.Bar />
    <Progress.Label>
      Loading
    </Progress.Label>
  </Progress>
  <Progress
    className="items-center"
    max={100}
    value={40}
  >
    <Progress.Bar />
    <Progress.Label>
      Loading
    </Progress.Label>
  </Progress>
  <Progress
    className="items-end"
    max={100}
    value={60}
  >
    <Progress.Bar />
    <Progress.Label>
      Loading
    </Progress.Label>
  </Progress>
</div>

Value#

Use the value prop to represent the current percentage of progress. The minimum and maximum values default to 0 and 100, respectively.

function Example() {
  const [value, setValue] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      const step = 10;
      setValue(value => (value + step) % (100 + step));
    }, 500);
    return () => clearInterval(interval);
  }, []);

  return (
    <Progress value={value}>
      <Progress.Bar />
      <Progress.Label>Loading</Progress.Label>
    </Progress>
  );
}

Max#

Use the max prop to set a different scale for the progress.

<Progress
  max={4}
  value={1}
>
  <Progress.Bar />
  <Progress.Label>
    Reward
  </Progress.Label>
</Progress>

Value label#

Use the getValueLabel prop to define an accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.

<Progress value={3} max={4} getValueLabel={(value, max) => ''}>
  <Progress.Bar />

  <Progress.Label>Reward</Progress.Label>
</Progress>;

Indeterminate#

Use isIndeterminate prop to represent an interdeterminate operation.

<Progress isIndeterminate>
  <Progress.Bar />
  <Progress.Label>
    Loading
  </Progress.Label>
</Progress>

Advanced usage#

Visible value#

Displaying the progress value as text is possible by composing the different components.

function Example() {
  const value = 50;

  return (
    <Progress value={value}>
      <Progress.Bar />

      <div className="flex justify-between">
        <Progress.Label>Loading</Progress.Label>

        <span className="text-body-2 text-on-surface">{value}%</span>
      </div>
    </Progress>
  );
}

Accessibility#

Adheres to the Meter WAI-ARIA design pattern.

Guidelines#

Usage of aria-label or Progress.Label is mandatory. It serves as the accessible name for the progress.