Progress

Visual indicator showing task completion or loading status

Installation

pnpm add @wandercom/design-system-web

Usage

Display progress for tasks, uploads, or multi-step processes:

import { Progress } from '@wandercom/design-system-web';

export function Example() {
  return <Progress value={60} />;
}

Examples

Loading example...
import { Progress } from '@wandercom/design-system-web';

export function ProgressExample() {
  return (
    <div className="flex flex-col gap-4">
      <Progress value={0} />
      <Progress value={25} />
      <Progress value={50} />
      <Progress value={75} />
      <Progress value={100} />
    </div>
  );
}

Variants

The Progress component supports different color variants:

Loading example...
import { Progress } from '@wandercom/design-system-web';

export function ProgressVariantsExample() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-2">
        <Progress value={33} variant="primary" showPercentage />
        <Progress value={66} variant="primary" showPercentage />
      </div>
      <div className="flex flex-col gap-2">
        <Progress value={33} variant="blue" showPercentage />
        <Progress value={66} variant="blue" showPercentage />
      </div>
    </div>
  );
}

Animated progress

Update the value dynamically to show real-time progress:

'use client';

import { Progress } from '@wandercom/design-system-web';
import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          clearInterval(timer);
          return 100;
        }
        return prev + 10;
      });
    }, 500);

    return () => clearInterval(timer);
  }, []);

  return <Progress value={progress} />;
}

Custom height

Adjust the height using the className prop:

<Progress value={60} className="h-1" />
<Progress value={60} className="h-3" />
<Progress value={60} className="h-4" />

Props

value?:

number
Current progress value between 0 and 100. Defaults to 0.

variant?:

'primary' | 'blue'
The color variant of the progress indicator. Defaults to primary.

showPercentage?:

boolean
Whether to display the percentage value next to the progress bar. Defaults to false.

max?:

number
Maximum progress value. Defaults to 100.

getValueLabel?:

(value: number, max: number) => string
Function to generate accessible label for screen readers.

className?:

string
Additional CSS classes to apply to the progress container.
Progress