Skip to main content

Progress

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

Import​

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

Basic Usage​

<Progress value={60} />

Values​

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

Sizes​

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

Color Schemes​

<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.

<Progress isIndeterminate />

Custom Max Value​

<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​

PropTypeDefaultDescription
valuenumber0Progress value
maxnumber100Maximum value
colorScheme"primary" | "accent" | "success" | "warning" | "error" | "info""primary"Color scheme
size"sm" | "md" | "lg""md"Progress bar height
isIndeterminatebooleanfalseShow 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";