Festa Design Studio Design System
← Back to Home

Progress Indicators

Clear, accessible progress patterns that communicate loading states and task completion. Each indicator uses ARIA progressbar semantics to announce progress updates to screen readers.

Linear Progress (Determinate)

Horizontal progress bars showing known completion percentage. Use for file uploads, downloads, and multi-step processes.

Uploading document.pdf 75%
Processing images 45% 
<div role="progressbar" 
     aria-valuenow="75" 
     aria-valuemin="0" 
     aria-valuemax="100" 
     aria-label="Upload progress"
     class="w-full h-3 bg-white-smoke-200 rounded-full overflow-hidden">
    <div class="h-full bg-gradient-to-r from-pepper-green-400 to-pepper-green-500 transition-all duration-300" 
         style="width: 75%"></div>
</div>

Linear Progress (Indeterminate)

Animated progress bar for unknown duration tasks. Use when loading data or processing requests without known completion time.

Loading data... 
<div role="status" aria-live="polite" aria-label="Loading in progress"
     class="w-full h-3 bg-white-smoke-200 rounded-full overflow-hidden relative">
    <div class="absolute inset-0 bg-gradient-to-r from-pepper-green-400 to-pepper-green-500 animate-pulse"></div>
</div>

Circular Progress

Circular progress indicators using SVG for precise control and smooth animations.

Determinate (65%)

65%

Downloading files...

Indeterminate (Spinner)

Processing request...





<div role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
    <svg class="transform -rotate-90" viewBox="0 0 120 120">
        <circle cx="60" cy="60" r="54" fill="none" stroke="#e5e7eb" stroke-width="8"/>
        <circle cx="60" cy="60" r="54" fill="none" stroke="#72b043" stroke-width="8" 
                stroke-dasharray="339.292" stroke-dashoffset="118.75"/>
    </svg>
</div>

Step Progress Indicator

Multi-step progress for forms, onboarding, and sequential processes.

  1. Account
  2. 2
    Profile
  3. 3
    Preferences
  4. 4
    Confirm 
<div role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="4" aria-label="Step 2 of 4">
    <ol class="flex items-center justify-between">
        
        <li class="flex flex-col items-center flex-1">
            <div class="w-10 h-10 bg-pepper-green-500 rounded-full">
                <svg>...checkmark...</svg>
            </div>
            <span>Account</span>
        </li>
        
        
        <li class="flex flex-col items-center flex-1">
            <div class="w-10 h-10 bg-pepper-green-500 ring-2 ring-pepper-green-500">2</div>
            <span>Profile</span>
        </li>
    </ol>
</div>

Progress Sizes

Three size variants for different contexts and visual hierarchy.

Small (h-2 / 8px)

Medium (h-3 / 12px)

Large (h-4 / 16px)

Accessibility & Usage Guidelines

ARIA Progressbar Attributes

  • role="progressbar": For determinate progress (known percentage)
  • role="status": For indeterminate progress (unknown duration)
  • aria-valuenow: Current progress value (0-100 or step number)
  • aria-valuemin: Minimum value (usually 0 or 1)
  • aria-valuemax: Maximum value (100 or total steps)
  • aria-label: Descriptive label (e.g., "Upload progress")
  • aria-live="polite": Announces progress updates (optional)

Key Accessibility Features

  • Screen reader support: Progress percentage announced via ARIA attributes
  • Visual text labels: Percentage shown visually alongside progress bar
  • Reduced motion: Use motion-reduce:animate-none to disable animations
  • Color independence: Progress conveyed via width/percentage, not color alone
  • Semantic markup: Ordered list for step progress maintains sequence

Usage Guidelines

  • When to use: File uploads/downloads, multi-step forms, loading states, time-based processes
  • When NOT to use: Instant operations (use spinners), indeterminate waits over 10 seconds (provide feedback)
  • Best practices:
    • Always provide percentage or step count for determinate progress
    • Use indeterminate only when duration truly unknown
    • Update ARIA attributes as progress changes
    • Provide completion feedback (success alert) when done
    • Allow cancellation for long-running operations

Reduced Motion Support 


<div class="animate-pulse motion-reduce:animate-none">
    
</div>


<svg class="animate-spin motion-reduce:animate-none">
    
</svg>