Progress

Progress is a visual indicator showing completion percentage or loading state.

Open in Storybook

Import

import { Progress } from "@tosui/react";

Basic Usage

Preview

Code

<Progress value={60} />

Values

Preview

Code

<VStack gap={4}>
  <Progress value={0} />
  <Progress value={25} />
  <Progress value={50} />
  <Progress value={75} />
  <Progress value={100} />
</VStack>

Sizes

Preview

sm (4px)

md (8px)

lg (12px)

Code

<VStack gap={4}>
  <Progress value={60} size="sm" />
  <Progress value={60} size="md" />
  <Progress value={60} size="lg" />
</VStack>

Color Schemes

Preview

Code

<VStack gap={4}>
  <Progress value={60} colorScheme="primary" />
  <Progress value={60} colorScheme="accent" />
  <Progress value={60} colorScheme="success" />
  <Progress value={60} colorScheme="warning" />
  <Progress value={60} colorScheme="error" />
  <Progress value={60} colorScheme="info" />
</VStack>

Indeterminate

Use isIndeterminate for loading states where progress is unknown.

Preview

Code

<Progress isIndeterminate />

Custom Max Value

Preview

3 of 10 complete

Code

<Progress value={3} max={10} />

Common Patterns

With Label

<VStack gap={1}>
  <HStack justify="space-between">
    <Text fontSize="sm">Uploading...</Text>
    <Text fontSize="sm">60%</Text>
  </HStack>
  <Progress value={60} />
</VStack>

Step Progress

function StepProgress({ currentStep, totalSteps }) {
  return (
    <VStack gap={2}>
      <Text fontSize="sm" color="foreground-muted">
        Step {currentStep} of {totalSteps}
      </Text>
      <Progress value={currentStep} max={totalSteps} />
    </VStack>
  );
}

File Upload

function FileUpload() {
  const [progress, setProgress] = useState(0);

  return (
    <VStack gap={2}>
      <HStack justify="space-between" w="100%">
        <Text fontSize="sm">document.pdf</Text>
        <Text fontSize="sm">{progress}%</Text>
      </HStack>
      <Progress value={progress} colorScheme="success" />
    </VStack>
  );
}

Props Reference

Prop	Type	Default	Description
value	number	0	Progress value
max	number	100	Maximum value
colorScheme	"primary" | "accent" | "success" | "warning" | "error" | "info"	"primary"	Color scheme
size	"sm" | "md" | "lg"	"md"	Progress bar height
isIndeterminate	boolean	false	Show animated loading state

Accessibility

• Uses role="progressbar" with proper ARIA attributes
• aria-valuenow, aria-valuemin, aria-valuemax for determinate progress
• Indeterminate mode omits aria-valuenow

TypeScript

import { Progress, type ProgressColorScheme, type ProgressSize, type ProgressProps } from "@tosui/react";