BlueStack.io - Component Library

step-indicator Component

Step Indicator

Step indicators guide users through multi-step processes, showing progress and navigation. They provide clear visual feedback about where users are in a workflow.

Basic Horizontal Steps

Preview Code

Copy

Personal Info

Basic details

Account Setup

Create account

Preferences

Customize settings

Confirmation

Review & finish

<div class="steps horizontal">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Personal Info</div>
      <div class="description">Basic details</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">Account Setup</div>
      <div class="description">Create account</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Preferences</div>
      <div class="description">Customize settings</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">4</span>
    </div>
    <div class="content">
      <div class="title">Confirmation</div>
      <div class="description">Review & finish</div>
    </div>
  </div>
</div>

<div class="steps horizontal">
                <div class="step completed">
                    <div class="indicator">
                        <span class="number">1</span>
                        <i class="icon check"></i>
                    </div>
                    <div class="content">
                        <div class="title">Personal Info</div>
                        <div class="description">Basic details</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step active">
                    <div class="indicator">
                        <span class="number">2</span>
                    </div>
                    <div class="content">
                        <div class="title">Account Setup</div>
                        <div class="description">Create account</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step">
                    <div class="indicator">
                        <span class="number">3</span>
                    </div>
                    <div class="content">
                        <div class="title">Preferences</div>
                        <div class="description">Customize settings</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step">
                    <div class="indicator">
                        <span class="number">4</span>
                    </div>
                    <div class="content">
                        <div class="title">Confirmation</div>
                        <div class="description">Review & finish</div>
                    </div>
                </div>
            </div>

Three Step Process

Preview Code

Copy

Choose Plan

Payment Details

Complete Order

<div class="steps horizontal">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Choose Plan</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">Payment Details</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Complete Order</div>
    </div>
  </div>
</div>

Five Step Process

Preview Code

Copy

Start

Details

Configure

Review

Deploy

<div class="steps horizontal">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Start</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step completed">
    <div class="indicator">
      <span class="number">2</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Details</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Configure</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">4</span>
    </div>
    <div class="content">
      <div class="title">Review</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">5</span>
    </div>
    <div class="content">
      <div class="title">Deploy</div>
    </div>
  </div>
</div>

<div class="steps horizontal">
                <div class="step completed">
                    <div class="indicator">
                        <span class="number">1</span>
                        <i class="icon check"></i>
                    </div>
                    <div class="content">
                        <div class="title">Start</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step completed">
                    <div class="indicator">
                        <span class="number">2</span>
                        <i class="icon check"></i>
                    </div>
                    <div class="content">
                        <div class="title">Details</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step active">
                    <div class="indicator">
                        <span class="number">3</span>
                    </div>
                    <div class="content">
                        <div class="title">Configure</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step">
                    <div class="indicator">
                        <span class="number">4</span>
                    </div>
                    <div class="content">
                        <div class="title">Review</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step">
                    <div class="indicator">
                        <span class="number">5</span>
                    </div>
                    <div class="content">
                        <div class="title">Deploy</div>
                    </div>
                </div>
            </div>

Step Indicator Sizes

Tiny Size

Preview Code

Copy

Step 1

Step 2

Step 3

<div class="steps horizontal tiny">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Step 1</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">Step 2</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Step 3</div>
    </div>
  </div>
</div>

Small Size

Preview Code

Copy

Step 1

Step 2

Step 3

<div class="steps horizontal small">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Step 1</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">Step 2</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Step 3</div>
    </div>
  </div>
</div>

Default Size

Preview Code

Copy

Step 1

Step 2

Step 3

<div class="steps horizontal">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Step 1</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">Step 2</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Step 3</div>
    </div>
  </div>
</div>

Large Size

Preview Code

Copy

Step 1

Step 2

Step 3

<div class="steps horizontal large">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Step 1</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">Step 2</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Step 3</div>
    </div>
  </div>
</div>

Big Size

Preview Code

Copy

Step 1

Step 2

Step 3

<div class="steps horizontal big">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Step 1</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">Step 2</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Step 3</div>
    </div>
  </div>
</div>

Step Indicator Colors

Primary Color

Preview Code

Copy

Complete

In Progress

Upcoming

<div class="steps horizontal primary">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Complete</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">In Progress</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Upcoming</div>
    </div>
  </div>
</div>

<div class="steps horizontal primary">
                <div class="step completed">
                    <div class="indicator">
                        <span class="number">1</span>
                        <i class="icon check"></i>
                    </div>
                    <div class="content">
                        <div class="title">Complete</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step active">
                    <div class="indicator">
                        <span class="number">2</span>
                    </div>
                    <div class="content">
                        <div class="title">In Progress</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step">
                    <div class="indicator">
                        <span class="number">3</span>
                    </div>
                    <div class="content">
                        <div class="title">Upcoming</div>
                    </div>
                </div>
            </div>

Positive Color

Preview Code

Copy

Complete

In Progress

Upcoming

<div class="steps horizontal positive">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Complete</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">In Progress</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Upcoming</div>
    </div>
  </div>
</div>

<div class="steps horizontal positive">
                <div class="step completed">
                    <div class="indicator">
                        <span class="number">1</span>
                        <i class="icon check"></i>
                    </div>
                    <div class="content">
                        <div class="title">Complete</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step active">
                    <div class="indicator">
                        <span class="number">2</span>
                    </div>
                    <div class="content">
                        <div class="title">In Progress</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step">
                    <div class="indicator">
                        <span class="number">3</span>
                    </div>
                    <div class="content">
                        <div class="title">Upcoming</div>
                    </div>
                </div>
            </div>

Warning Color

Preview Code

Copy

Complete

In Progress

Upcoming

<div class="steps horizontal warning">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Complete</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">In Progress</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Upcoming</div>
    </div>
  </div>
</div>

<div class="steps horizontal warning">
                <div class="step completed">
                    <div class="indicator">
                        <span class="number">1</span>
                        <i class="icon check"></i>
                    </div>
                    <div class="content">
                        <div class="title">Complete</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step active">
                    <div class="indicator">
                        <span class="number">2</span>
                    </div>
                    <div class="content">
                        <div class="title">In Progress</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step">
                    <div class="indicator">
                        <span class="number">3</span>
                    </div>
                    <div class="content">
                        <div class="title">Upcoming</div>
                    </div>
                </div>
            </div>

Purple Color

Preview Code

Copy

Complete

In Progress

Upcoming

<div class="steps horizontal purple">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Complete</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">In Progress</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Upcoming</div>
    </div>
  </div>
</div>

<div class="steps horizontal purple">
                <div class="step completed">
                    <div class="indicator">
                        <span class="number">1</span>
                        <i class="icon check"></i>
                    </div>
                    <div class="content">
                        <div class="title">Complete</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step active">
                    <div class="indicator">
                        <span class="number">2</span>
                    </div>
                    <div class="content">
                        <div class="title">In Progress</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step">
                    <div class="indicator">
                        <span class="number">3</span>
                    </div>
                    <div class="content">
                        <div class="title">Upcoming</div>
                    </div>
                </div>
            </div>

Vertical Step Indicator

Basic Vertical Steps

Preview Code

Copy

Personal Information

Enter your name, email, and contact details

Account Setup

Choose username and password

Preferences

Customize your experience

Confirmation

Review and complete setup

<div class="steps vertical">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Personal Information</div>
      <div class="description">Enter your name, email, and contact details</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">Account Setup</div>
      <div class="description">Choose username and password</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Preferences</div>
      <div class="description">Customize your experience</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">4</span>
    </div>
    <div class="content">
      <div class="title">Confirmation</div>
      <div class="description">Review and complete setup</div>
    </div>
  </div>
</div>

<div class="steps vertical">
                <div class="step completed">
                    <div class="indicator">
                        <span class="number">1</span>
                        <i class="icon check"></i>
                    </div>
                    <div class="content">
                        <div class="title">Personal Information</div>
                        <div class="description">Enter your name, email, and contact details</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step active">
                    <div class="indicator">
                        <span class="number">2</span>
                    </div>
                    <div class="content">
                        <div class="title">Account Setup</div>
                        <div class="description">Choose username and password</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step">
                    <div class="indicator">
                        <span class="number">3</span>
                    </div>
                    <div class="content">
                        <div class="title">Preferences</div>
                        <div class="description">Customize your experience</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step">
                    <div class="indicator">
                        <span class="number">4</span>
                    </div>
                    <div class="content">
                        <div class="title">Confirmation</div>
                        <div class="description">Review and complete setup</div>
                    </div>
                </div>
            </div>

Compact Vertical Steps

Preview Code

Copy

Upload Files

Processing

Review Results

Download

<div class="steps vertical compact">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Upload Files</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">Processing</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Review Results</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">4</span>
    </div>
    <div class="content">
      <div class="title">Download</div>
    </div>
  </div>
</div>

<div class="steps vertical compact">
                <div class="step completed">
                    <div class="indicator">
                        <span class="number">1</span>
                        <i class="icon check"></i>
                    </div>
                    <div class="content">
                        <div class="title">Upload Files</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step active">
                    <div class="indicator">
                        <span class="number">2</span>
                    </div>
                    <div class="content">
                        <div class="title">Processing</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step">
                    <div class="indicator">
                        <span class="number">3</span>
                    </div>
                    <div class="content">
                        <div class="title">Review Results</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step">
                    <div class="indicator">
                        <span class="number">4</span>
                    </div>
                    <div class="content">
                        <div class="title">Download</div>
                    </div>
                </div>
            </div>

Sidebar Step Indicator

Sidebar with Content Area

Preview Code

Copy

Getting Started

Basic information

Profile Setup

Complete your profile

Preferences

Configure settings

Review

Confirm details

Profile Setup

Please complete your profile information to continue.

<div class="steps sidebar">
  <div class="sidebar-nav">
    <div class="step completed">
      <div class="indicator">
        <span class="number">1</span>
        <i class="icon check"></i>
      </div>
      <div class="content">
        <div class="title">Getting Started</div>
        <div class="description">Basic information</div>
      </div>
      <div class="connector"></div>
    </div>
    <div class="step active">
      <div class="indicator">
        <span class="number">2</span>
      </div>
      <div class="content">
        <div class="title">Profile Setup</div>
        <div class="description">Complete your profile</div>
      </div>
      <div class="connector"></div>
    </div>
    <div class="step">
      <div class="indicator">
        <span class="number">3</span>
      </div>
      <div class="content">
        <div class="title">Preferences</div>
        <div class="description">Configure settings</div>
      </div>
      <div class="connector"></div>
    </div>
    <div class="step">
      <div class="indicator">
        <span class="number">4</span>
      </div>
      <div class="content">
        <div class="title">Review</div>
        <div class="description">Confirm details</div>
      </div>
    </div>
  </div>
  <div class="sidebar-content">
    <h3 class="text-lg font-semibold mb-4">Profile Setup</h3>
    <p class="text-gray-600 mb-6">Please complete your profile information to continue.</p>
    <form class="space-y-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Display Name</label>
        <input type="text" class="input w-full" placeholder="Enter your name" />
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
        <textarea class="input w-full" rows="3" placeholder="Tell us about yourself"></textarea>
      </div>
      <div class="flex gap-3 pt-4">
        <button type="button" class="button">Previous</button>
        <button type="button" class="button primary">Continue</button>
      </div>
    </form>
  </div>
</div>

<div class="steps sidebar">
                <div class="sidebar-nav">
                    <div class="step completed">
                        <div class="indicator">
                            <span class="number">1</span>
                            <i class="icon check"></i>
                        </div>
                        <div class="content">
                            <div class="title">Getting Started</div>
                            <div class="description">Basic information</div>
                        </div>
                        <div class="connector"></div>
                    </div>
                    <div class="step active">
                        <div class="indicator">
                            <span class="number">2</span>
                        </div>
                        <div class="content">
                            <div class="title">Profile Setup</div>
                            <div class="description">Complete your profile</div>
                        </div>
                        <div class="connector"></div>
                    </div>
                    <div class="step">
                        <div class="indicator">
                            <span class="number">3</span>
                        </div>
                        <div class="content">
                            <div class="title">Preferences</div>
                            <div class="description">Configure settings</div>
                        </div>
                        <div class="connector"></div>
                    </div>
                    <div class="step">
                        <div class="indicator">
                            <span class="number">4</span>
                        </div>
                        <div class="content">
                            <div class="title">Review</div>
                            <div class="description">Confirm details</div>
                        </div>
                    </div>
                </div>
                <div class="sidebar-content">
                    <h3 class="text-lg font-semibold mb-4">Profile Setup</h3>
                    <p class="text-gray-600 mb-6">Please complete your profile information to continue.</p>
                    <form class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Display Name</label>
                            <input type="text" class="input w-full" placeholder="Enter your name">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
                            <textarea class="input w-full" rows="3" placeholder="Tell us about yourself"></textarea>
                        </div>
                        <div class="flex gap-3 pt-4">
                            <button type="button" class="button">Previous</button>
                            <button type="button" class="button primary">Continue</button>
                        </div>
                    </form>
                </div>
            </div>

Alternative Styles

Minimal Dots

Preview Code

Copy

<div class="steps minimal">
  <div class="step completed"></div>
  <div class="step completed"></div>
  <div class="step active"></div>
  <div class="step"></div>
  <div class="step"></div>
</div>

With Progress Bar

Preview Code

Copy

<div class="steps progress-bar">
  <div class="progress-track">
    <div class="progress-fill" style="width: 60%"></div>
  </div>
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
  </div>
  <div class="step completed">
    <div class="indicator">
      <span class="number">2</span>
      <i class="icon check"></i>
    </div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">3</span>
    </div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">4</span>
    </div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">5</span>
    </div>
  </div>
</div>

Outlined Steps

Preview Code

Copy

Step 1

Step 2

Step 3

<div class="steps horizontal outline">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Step 1</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">Step 2</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Step 3</div>
    </div>
  </div>
</div>

Icons Instead of Numbers

Preview Code

Copy

Profile

Settings

Complete

<div class="steps horizontal icons">
  <div class="step completed">
    <div class="indicator">
      <i class="icon user"></i>
    </div>
    <div class="content">
      <div class="title">Profile</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <i class="icon settings"></i>
    </div>
    <div class="content">
      <div class="title">Settings</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <i class="icon check-circle"></i>
    </div>
    <div class="content">
      <div class="title">Complete</div>
    </div>
  </div>
</div>

<div class="steps horizontal icons">
                <div class="step completed">
                    <div class="indicator">
                        <i class="icon user"></i>
                    </div>
                    <div class="content">
                        <div class="title">Profile</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step active">
                    <div class="indicator">
                        <i class="icon settings"></i>
                    </div>
                    <div class="content">
                        <div class="title">Settings</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step">
                    <div class="indicator">
                        <i class="icon check-circle"></i>
                    </div>
                    <div class="content">
                        <div class="title">Complete</div>
                    </div>
                </div>
            </div>

Interactive Features

Clickable Steps

Preview Code

Copy

Completed

Click to revisit

Current

You are here

Locked

Complete previous

<div class="steps horizontal clickable">
  <div class="step completed" onclick="alert('Navigate to Step 1')">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Completed</div>
      <div class="description">Click to revisit</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active" onclick="alert('Current Step')">
    <div class="indicator">
      <span class="number">2</span>
    </div>
    <div class="content">
      <div class="title">Current</div>
      <div class="description">You are here</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step disabled">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Locked</div>
      <div class="description">Complete previous</div>
    </div>
  </div>
</div>

<div class="steps horizontal clickable">
                <div class="step completed" onclick="alert('Navigate to Step 1')">
                    <div class="indicator">
                        <span class="number">1</span>
                        <i class="icon check"></i>
                    </div>
                    <div class="content">
                        <div class="title">Completed</div>
                        <div class="description">Click to revisit</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step active" onclick="alert('Current Step')">
                    <div class="indicator">
                        <span class="number">2</span>
                    </div>
                    <div class="content">
                        <div class="title">Current</div>
                        <div class="description">You are here</div>
                    </div>
                    <div class="connector"></div>
                </div>
                <div class="step disabled">
                    <div class="indicator">
                        <span class="number">3</span>
                    </div>
                    <div class="content">
                        <div class="title">Locked</div>
                        <div class="description">Complete previous</div>
                    </div>
                </div>
            </div>

Loading State

Preview Code

Copy

Uploaded

Processing...

Complete

<div class="steps horizontal">
  <div class="step completed">
    <div class="indicator">
      <span class="number">1</span>
      <i class="icon check"></i>
    </div>
    <div class="content">
      <div class="title">Uploaded</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step active">
    <div class="indicator">
      <i class="icon loader animate-spin"></i>
    </div>
    <div class="content">
      <div class="title">Processing...</div>
    </div>
    <div class="connector"></div>
  </div>
  <div class="step">
    <div class="indicator">
      <span class="number">3</span>
    </div>
    <div class="content">
      <div class="title">Complete</div>
    </div>
  </div>
</div>