Progress Indicator Sidebar

A progress indicator sidebar built with pure HTML and CSS that visually communicates multi step workflow advancement within a vertical layout. It highlights active, completed, and pending stages to provide structured progress clarity.

Usage

Use this component when interfaces require clear workflow progression tracking, such as onboarding sequences, multi step forms, checkout flows, or configuration setups that benefit from persistent step visibility.

Implementation

The structure uses vertical step markers and connector lines to represent sequential progression. CSS controls state styling, spacing, and responsive stacking to ensure readability across different screen sizes.

HTML

<aside class="sidebar-progress">
  <div class="sidebar-progress__item is-done">Step 1</div>
  <div class="sidebar-progress__item is-current">Step 2</div>
  <div class="sidebar-progress__item">Step 3</div>
</aside>

<aside class="sidebar-progress">
  <div class="sidebar-progress__item is-done">Step 1</div>
  <div class="sidebar-progress__item is-current">Step 2</div>
  <div class="sidebar-progress__item">Step 3</div>
</aside>

CSS

.sidebar-progress {
  width: 200px;
  padding: 0.5rem;
  border-radius: 16px;
  background: #f9fafb;
  display: grid;
  gap: 0.3rem;
}

.sidebar-progress__item {
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  font-size: 12px;
  color: #6b7280;
  background: #ffffff;
  transition: background 150ms ease;
}

.sidebar-progress__item.is-current {
  background: #6366f1;
  color: #ffffff;
  font-weight: 600;
}

.sidebar-progress__item.is-done {
  background: #ecfdf5;
  color: #16a34a;
}

@media (prefers-color-scheme: dark) {
  .sidebar-progress {
    background: #020617;
  }

  .sidebar-progress__item {
    background: #020617;
    color: #9ca3af;
  }

  .sidebar-progress__item.is-done {
    background: #052e16;
    color: #4ade80;
  }
}

.sidebar-progress {
  width: 200px;
  padding: 0.5rem;
  border-radius: 16px;
  background: #f9fafb;
  display: grid;
  gap: 0.3rem;
}

.sidebar-progress__item {
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  font-size: 12px;
  color: #6b7280;
  background: #ffffff;
  transition: background 150ms ease;
}

.sidebar-progress__item.is-current {
  background: #6366f1;
  color: #ffffff;
  font-weight: 600;
}

.sidebar-progress__item.is-done {
  background: #ecfdf5;
  color: #16a34a;
}

@media (prefers-color-scheme: dark) {
  .sidebar-progress {
    background: #020617;
  }

  .sidebar-progress__item {
    background: #020617;
    color: #9ca3af;
  }

  .sidebar-progress__item.is-done {
    background: #052e16;
    color: #4ade80;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Displays multi stage workflow progress
• Differentiates active and completed states
• Maintains clean vertical alignment
• Fully responsive across breakpoints
• Suitable for dashboards and guided processes

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.