Leaf UI
  • English

      • Progress

      Display how much of a task is complete.

      Basic usage

      Live previewBasic usage
      45%
      45%
      basic.tsx
      import { Button, Progress } from '@sudden3/leaf-ui';
import { useState } from 'react';
export function ProgressBasic() {
  const [percent, setPercent] = useState(45);
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Progress percent={percent} aria-label="Upload progress" />
      <Progress percent={70} status="error" />
      <Progress percent={100} />
      <Progress indeterminate aria-label="Loading progress" />
      <div className="leaf-demo-row">
        <Progress percent={percent} type="circle" aria-label="Project progress" />
        <Progress percent={100} type="circle" size={80} />
        <Progress percent={60} type="circle" status="error" size={80} />
      </div>
      <div className="leaf-demo-row">
        <Button
          variant="outline"
          disabled={percent === 0}
          onClick={() => setPercent(Math.max(0, percent - 10))}
        >
          Decrease
        </Button>
        <Button disabled={percent === 100} onClick={() => setPercent(Math.min(100, percent + 10))}>
          Increase
        </Button>
      </div>
    </div>
  );
}

      Progress API

      PropTypeDefaultDescription
      percentnumber0Completion percentage, from 0 to 100
      type'line' | 'circle''line'Line or circular progress
      status'normal' | 'success' | 'error''normal'Progress status
      showInfobooleantrueShow percentage or status icon
      format(percent: number) => ReactNode—Custom progress text
      strokeWidthnumber8 / 6Stroke width; pixels for lines, view units for circles
      colorstring—Custom progress color
      sizenumber100Circular diameter in pixels
      indeterminatebooleanfalseAnimated loading when the total progress is unknown; no percentage
      trailColorstring—Track color

      Types

      Import the component props and item types when preparing your own values.

      import type { ProgressProps } from '@sudden3/leaf-ui';

      Usage notes

      Reaching 100% automatically uses success styling. Set aria-label to identify the task, such as upload progress. The numeric progress is also exposed to assistive technology.