Carbon Design System

A progress indicator is a visual representation of a user’s progress through a set of steps, guiding toward the completion of a specified process.

Overview
Live demo
Best practices
Feedback

Overview

Use progress indicators to keep the user on track when completing a specific task. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed.

Live demo

Theme selector

CodeSandbox React Web Components Angular Vue

Live editor for the Progress indicator component


    <div className="some-container">
      <ProgressIndicator>
        <ProgressStep
          complete
          label="First step"
          description="Step 1: Getting started with Carbon Design System"
          secondaryLabel="Optional label"
        />
        <ProgressStep
          current
          label="Second step with tooltip"