Skip to Content
Dashflow Logo

Progress Component

A comprehensive guide to using the Progress component with examples, props, and best practices.

Overview

The Progress component is a visual indicator that shows the completion status of a task or process. It provides users with clear feedback about how much of a process has been completed and how much remains.

Basic Usage

import { Progress } from '@dashflowx/core'


export default function ProgressExample() {
  return (
    <Progress 
      progress={75}
      className="w-full"
    />
  )
}

Preview:

Props

PropTypeDefaultDescription
progressnumber0The progress value (0-100)
classNamestring''Additional CSS classes for styling

Examples

Basic Progress Bar

<Progress 
  progress={50}
  className="w-full"
/>

Preview:

High Progress

<Progress 
  progress={90}
  className="w-full"
/>

Preview:

Low Progress

<Progress 
  progress={25}
  className="w-full"
/>

Preview:

Complete Progress

<Progress 
  progress={100}
  className="w-full"
/>

Preview:

Common Use Cases

File Upload Progress

<div className="space-y-2">
  <div className="flex justify-between text-sm">
    <span>Uploading file...</span>
    <span>{uploadProgress}%</span>
  </div>
  <Progress 
    progress={uploadProgress}
    className="w-full"
  />
</div>

Form Completion

<div className="space-y-2">
  <div className="flex justify-between text-sm">
    <span>Form Progress</span>
    <span>{formProgress}%</span>
  </div>
  <Progress 
    progress={formProgress}
    className="w-full"
  />
</div>

Loading States

<div className="space-y-2">
  <div className="flex justify-between text-sm">
    <span>Loading data...</span>
    <span>{loadingProgress}%</span>
  </div>
  <Progress 
    progress={loadingProgress}
    className="w-full"
  />
</div>

Task Completion

<div className="space-y-2">
  <div className="flex justify-between text-sm">
    <span>Processing tasks</span>
    <span>{taskProgress}%</span>
  </div>
  <Progress 
    progress={taskProgress}
    className="w-full"
  />
</div>

Best Practices

1. Clear Labels

Always provide clear labels and percentage indicators.

// ✅ Good - Clear progress indication
<div className="space-y-2">
  <div className="flex justify-between text-sm">
    <span>Uploading document.pdf</span>
    <span>{progress}%</span>
  </div>
  <Progress progress={progress} className="w-full" />
</div>

2. Appropriate Sizing

Use appropriate sizing for different contexts.

// ✅ Good - Appropriate sizing
<div className="space-y-4">
  <Progress progress={50} className="w-full h-2" />
  <Progress progress={75} className="w-full h-3" />
  <Progress progress={90} className="w-full h-4" />
</div>

3. Smooth Transitions

Use smooth transitions for better user experience.

// ✅ Good - Smooth transitions
<Progress 
  progress={progress}
  className="w-full transition-all duration-300"
/>

4. Accessibility

Ensure proper accessibility with ARIA attributes.

// ✅ Good - Accessible progress
<Progress 
  progress={progress}
  className="w-full"
  aria-label={`Progress: ${progress}%`}
/>

5. Color Coding

Use different colors for different states.

// ✅ Good - Color coding
<Progress 
  progress={progress}
  className={`w-full ${progress < 30 ? 'bg-red-500' : progress < 70 ? 'bg-yellow-500' : 'bg-green-500'}`}
/>

Customization

Custom Styling

You can customize the progress bar appearance using CSS classes:

<Progress 
  progress={progress}
  className="w-full h-4 bg-gray-100 rounded-full"
/>

Different Colors

Use different colors for different progress states:

// Success state
<Progress 
  progress={100}
  className="w-full bg-green-500"
/>


// Warning state
<Progress 
  progress={60}
  className="w-full bg-yellow-500"
/>


// Error state
<Progress 
  progress={20}
  className="w-full bg-red-500"
/>

Animated Progress

Add animations to make progress more engaging:

<Progress 
  progress={progress}
  className="w-full animate-pulse"
/>

Advanced Usage

Dynamic Progress

Update progress dynamically based on user actions:

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


const handleProgressUpdate = (newProgress: number) => {
  setProgress(newProgress);
};


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


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

Multiple Progress Bars

Use multiple progress bars for different tasks:

<div className="space-y-4">
  <div>
    <div className="flex justify-between text-sm mb-1">
      <span>Downloading files</span>
      <span>{downloadProgress}%</span>
    </div>
    <Progress progress={downloadProgress} className="w-full" />
  </div>
  
  <div>
    <div className="flex justify-between text-sm mb-1">
      <span>Processing data</span>
      <span>{processProgress}%</span>
    </div>
    <Progress progress={processProgress} className="w-full" />
  </div>
</div>

Progress with Steps

Show progress with step indicators:

<div className="space-y-2">
  <div className="flex justify-between text-sm">
    <span>Step {currentStep} of {totalSteps}</span>
    <span>{Math.round((currentStep / totalSteps) * 100)}%</span>
  </div>
  <Progress 
    progress={(currentStep / totalSteps) * 100}
    className="w-full"
  />
</div>
  • Skeleton: For loading placeholders
  • Spinner: For loading indicators
  • Badge: For status indicators
  • Alert: For completion notifications
  • Button: For progress controls

API Reference

For the complete API reference and advanced usage patterns, see the Progress API documentation.

Edit this page on GitHub
previousPopover