HealingProgress

A progress indicator designed for visualizing healing journeys, skill development lifecycles, and multi-step processes with encouragement and warmth.

Purpose

The HealingProgress component helps users understand:

• Where they are in a healing or learning journey
• What steps have been completed
• What's coming next
• Progress made over time

Live Demo

Skill Development Lifecycle

Research & Evidence Review

Content Development

Quality Review

4

Deployment

Great progress! Your skill is nearly ready for publication.

Healing Journey Example

Initial Assessment

Setting Intentions

Active Practice

4

Integration & Reflection

5

Ongoing Maintenance

You're building a sustainable healing practice. Remember to honor your pace.

Course Progress Example

Understanding Foundations

Learning Techniques

Practicing Daily

Advanced Applications

5

Teaching Others

Props

Prop	Type	Required	Description
steps	HealingStep[]	Yes	Array of step objects defining the journey
encouragementMessage	string	No	Optional encouraging message to display
className	string	No	Additional CSS classes

HealingStep Interface

interface HealingStep {
  id: string;           // Unique identifier
  label: string;        // Step description
  status: StepStatus;   // 'completed' | 'current' | 'upcoming'
}

Step Statuses

Completed

• Displays a checkmark icon
• Green healing color
• Solid connecting line to next step
• Font: Medium weight

Current

• Displays a pulsing dot
• Blue calm color with gentle glow
• Animated breathing effect
• Font: Semibold weight
• Draws user attention

Upcoming

• Displays step number
• Gray grounding color
• Subtle appearance
• Font: Regular weight

Code Examples

Basic Usage

import { HealingProgress } from '@site/src/components/healing';

<HealingProgress
  steps={[
    { id: '1', label: 'Step One', status: 'completed' },
    { id: '2', label: 'Step Two', status: 'current' },
    { id: '3', label: 'Step Three', status: 'upcoming' }
  ]}
/>

With Encouragement

<HealingProgress
  steps={[
    { id: '1', label: 'Foundation Work', status: 'completed' },
    { id: '2', label: 'Active Healing', status: 'current' },
    { id: '3', label: 'Integration', status: 'upcoming' }
  ]}
  encouragementMessage="You're making meaningful progress. Be gentle with yourself."
/>

Dynamic Progress (React Component)

import { HealingProgress, HealingStep } from '@site/src/components/healing';
import { useState } from 'react';

function MyJourney() {
  const [currentStep, setCurrentStep] = useState(2);

  const steps: HealingStep[] = [
    {
      id: '1',
      label: 'Awareness',
      status: currentStep > 1 ? 'completed' : 'current'
    },
    {
      id: '2',
      label: 'Exploration',
      status: currentStep === 2 ? 'current' : currentStep > 2 ? 'completed' : 'upcoming'
    },
    {
      id: '3',
      label: 'Integration',
      status: currentStep === 3 ? 'current' : currentStep > 3 ? 'completed' : 'upcoming'
    }
  ];

  return (
    <div>
      <HealingProgress steps={steps} />
      <button onClick={() => setCurrentStep(currentStep + 1)}>
        Next Step
      </button>
    </div>
  );
}

Use Cases

Skill Development

Track the lifecycle of a healing skill from research to deployment:

1. Research & Evidence Review
2. Content Development
3. Quality Review
4. Community Testing
5. Deployment

Healing Journey

Guide users through a therapeutic process:

1. Assessment
2. Goal Setting
3. Active Practice
4. Progress Review
5. Maintenance

Course Progress

Show learning progression:

1. Foundations
2. Core Techniques
3. Practice
4. Advanced Topics
5. Mastery

Treatment Protocol

Visualize multi-phase treatment:

1. Initial Consultation
2. Acute Phase
3. Stabilization
4. Integration
5. Follow-up

Accessibility Features

• ARIA progressbar role: Semantic progress indication
• aria-valuenow/valuemin/valuemax: Current progress announced to screen readers
• Clear status indicators: Multiple visual cues (color, icon, animation)
• Descriptive labels: Each step clearly labeled with status
• Live regions: Encouragement messages use aria-live for screen reader updates
• Semantic HTML: Proper heading and list structures

Screen Reader Experience

Screen readers will announce progress values via the aria-valuenow, aria-valuemin, and aria-valuemax attributes. The exact announcement varies by screen reader, but typically includes the current progress value and range.

Visual Design

Colors

• Completed: Healing green (growth, achievement)
• Current: Calm blue (presence, focus)
• Upcoming: Neutral gray (patience, potential)

Animations

• Current step: Gentle pulse animation (1.5s cycle)
• Current dot: Breathing animation (draws eye, calming)
• Transitions: Smooth 300ms color transitions

Layout

• Vertical timeline: Clear progression flow
• Generous spacing: Not cramped, easy to scan
• Connecting lines: Visual flow between steps
• Circle indicators: Clear focal points

Best Practices

When to Use

• Multi-step healing processes
• Skill development tracking
• Course or program progress
• Treatment protocol stages
• Learning journeys

Encouragement Messages

Use encouragement thoughtfully:

• Acknowledge progress made
• Normalize the journey's pace
• Avoid toxic positivity
• Be specific to the context
• Include self-compassion prompts

Customization

Custom Styling

<HealingProgress
  steps={mySteps}
  className="max-w-md mx-auto p-6 bg-grounding-dark rounded-lg"
/>

Different Step Counts

The component adapts to any number of steps (3-10 recommended):

// Simple 3-step process
<HealingProgress
  steps={[
    { id: '1', label: 'Begin', status: 'completed' },
    { id: '2', label: 'Practice', status: 'current' },
    { id: '3', label: 'Integrate', status: 'upcoming' }
  ]}
/>

// Detailed 7-step journey
<HealingProgress
  steps={[/* 7 detailed steps */]}
/>

Related Components

• PracticeSelector - For choosing practices at journey start
• SafetyConsent - For informed consent before beginning

Design Inspiration

This component draws from:

• Clinical progress tracking: Medical treatment timelines
• Mindfulness apps: Calm, Headspace progress visualizations
• Educational platforms: Course completion indicators
• Hero's journey: Narrative arc of transformation