> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Progress

> A progress bar component for displaying completion status

export const ProgressLoadingExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ProgressLoadingExample" frameBorder="0" width="100%" height="360"></iframe>;

export const ProgressFormExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ProgressFormExample" frameBorder="0" width="100%" height="400"></iframe>;

export const ProgressUploadExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ProgressUploadExample" frameBorder="0" width="100%" height="360"></iframe>;

export const ProgressCustomExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ProgressCustomExample" frameBorder="0" width="100%" height="400"></iframe>;

export const ProgressLabelExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ProgressLabelExample" frameBorder="0" width="100%" height="380"></iframe>;

export const ProgressValuesExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ProgressValuesExample" frameBorder="0" width="100%" height="360"></iframe>;

export const ProgressBasicExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ProgressBasicExample" frameBorder="0" width="100%" height="320"></iframe>;

## Overview

The Progress component displays completion status with customizable appearance and animations.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Progress } from '@peppermint-design/devreadykit-custom';

    export default function App() {
      return <Progress value={75} />;
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ProgressBasicExamplePreview />
  </Tab>
</Tabs>

## Different Values

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Progress } from '@peppermint-design/devreadykit-custom';

    const values = [25, 50, 75, 100];

    export default function ProgressExamples() {
      return (
        <div className="space-y-2">
          {values.map((value) => (
            <Progress key={value} value={value} />
          ))}
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ProgressValuesExamplePreview />
  </Tab>
</Tabs>

## With Labels

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Progress } from '@peppermint-design/devreadykit-custom';

    export default function LabelledProgress() {
      return (
        <Progress
          variant="label"
          title="Project completion"
          supportText="Migrating tasks and assets"
          value={62}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ProgressLabelExamplePreview />
  </Tab>
</Tabs>

## Props

| Prop              | Type      | Default | Description              |
| :---------------- | :-------- | :------ | :----------------------- |
| value             | `number`  | —       | Current progress value   |
| max               | `number`  | `100`   | Maximum value            |
| className         | `string`  | —       | Additional CSS classes   |
| progressClassName | `string`  | —       | Progress bar CSS classes |
| animated          | `boolean` | `true`  | Show animation           |
| showPercentage    | `boolean` | `false` | Show percentage text     |

## Examples

### Upload Progress

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useEffect, useState } from 'react';
    import { Progress } from '@peppermint-design/devreadykit-custom';

    function UploadProgress({ fileName }: { fileName: string }) {
      const [progress, setProgress] = useState(18);

      useEffect(() => {
        const timer = window.setInterval(() => {
          setProgress((prev) => (prev >= 100 ? 100 : prev + Math.random() * 15));
        }, 800);

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

      return (
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span>{fileName}</span>
            <span>{Math.round(progress)}%</span>
          </div>
          <Progress variant="label" value={progress} title="Uploading" supportText="Migrating files" />
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ProgressUploadExamplePreview />
  </Tab>
</Tabs>

### Loading States

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useEffect, useState } from 'react';
    import { Button, Progress } from '@peppermint-design/devreadykit-custom';

    export default function LoadingProgress() {
      const [isLoading, setLoading] = useState(false);
      const [progress, setProgress] = useState(0);

      useEffect(() => {
        if (!isLoading) {
          setProgress(0);
          return;
        }

        const timer = window.setInterval(() => {
          setProgress((prev) => (prev >= 100 ? 100 : prev + Math.random() * 20));
        }, 600);

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

      return (
        <div className="space-y-3">
          <Button size="s" onClick={() => setLoading(true)} disabled={isLoading}>
            {isLoading ? 'Loading…' : 'Simulate loading'}
          </Button>

          {isLoading && (
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span>Loading…</span>
                <span>{Math.round(progress)}%</span>
              </div>
              <Progress value={progress} showPercentage={false} />
            </div>
          )}
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ProgressLoadingExamplePreview />
  </Tab>
</Tabs>