Skip to main content

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.

​
Overview

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

​
Basic Usage

import { Progress } from '@peppermint-design/devreadykit-custom';

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

​
Different Values

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>
  );
}

​
With Labels

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}
    />
  );
}

​
Props

PropTypeDefaultDescription
valuenumber—Current progress value
maxnumber100Maximum value
classNamestring—Additional CSS classes
progressClassNamestring—Progress bar CSS classes
animatedbooleantrueShow animation
showPercentagebooleanfalseShow percentage text

​
Examples

​
Upload Progress

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>
  );
}

​
Loading States

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>
  );
}