Progress

Visual indicators for task completion, loading states, and multi-step processes.

Linear Progress

Basic Progress

Progress with Label

Property Upload 75%

Progress Sizes

Progress Colors

Primary 60%
Success 100%
Warning 45%
Error 25%

Striped & Animated

Circular Progress

Circular Variants

60%
75%
90%

Step Progress

Property Listing Process

✓
Basic Info
✓
Photos
3
Details
4
Pricing
5
Review

Real Estate Use Cases

Property Upload Progress

Uploading photos... 8 of 12

Lead Conversion Funnel

Initial Contact 100%
Property Viewing 75%
Offer Made 40%
Deal Closed 25%

Implementation Guide

HTML Structure

<!-- Linear Progress -->
<div class="lyd-progress">
    <div class="lyd-progress-linear">
        <div class="lyd-progress-bar" style="width: 60%"></div>
    </div>
</div>

<!-- Progress with Label -->
<div class="lyd-progress-wrapper">
    <div class="lyd-progress-header">
        <span class="lyd-progress-label">Loading...</span>
        <span class="lyd-progress-percent">60%</span>
    </div>
    <div class="lyd-progress-linear">
        <div class="lyd-progress-bar" style="width: 60%"></div>
    </div>
</div>

<!-- Step Progress -->
<div class="lyd-progress-steps">
    <div class="lyd-progress-steps-line" style="width: 50%"></div>
    <div class="lyd-progress-step completed">
        <div class="lyd-progress-step-dot">✓</div>
        <span class="lyd-progress-step-label">Step 1</span>
    </div>
    <!-- More steps... -->
</div>

React/Next.js Component

// components/Progress.tsx
interface ProgressProps {
  value: number;
  max?: number;
  label?: string;
  variant?: 'primary' | 'success' | 'warning' | 'error';
  size?: 'small' | 'medium' | 'large';
  striped?: boolean;
  animated?: boolean;
  showPercent?: boolean;
}

export const Progress = ({
  value,
  max = 100,
  label,
  variant = 'primary',
  size = 'medium',
  striped = false,
  animated = false,
  showPercent = false
}: ProgressProps) => {
  const percentage = Math.min(100, Math.max(0, (value / max) * 100));
  const sizeClass = size === 'small' ? 'small' : size === 'large' ? 'large' : '';
  const stripedClass = striped ? 'striped' : '';
  const animatedClass = animated ? 'animated' : '';
  
  return (
    <div className="lyd-progress-wrapper">
      {(label || showPercent) && (
        <div className="lyd-progress-header">
          {label && <span className="lyd-progress-label">{label}</span>}
          {showPercent && <span className="lyd-progress-percent">{percentage.toFixed(0)}%</span>}
        </div>
      )}
      <div className={`lyd-progress-linear ${sizeClass}`}>
        <div 
          className={`lyd-progress-bar ${variant} ${stripedClass} ${animatedClass}`}
          style={{ width: `${percentage}%` }}
        />
      </div>
    </div>
  );
};

API Reference

Class Description
.lyd-progress Base progress container
.lyd-progress-linear Linear progress track
.lyd-progress-bar Progress bar fill
.lyd-progress-circular Circular progress container
.lyd-progress-steps Step progress container
.lyd-progress-step Individual step
.small, .large Size variants
.striped Striped pattern
.animated Animated stripes
.success, .warning, .error Color variants