A representation of a user’s progress through a series of discrete steps.
Component
Progress indicator
Other names: Progress tracker, Stepper, Steps, Meter
46 examples
Steps
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
- Open source
Progress indicator
Atlassian Design System
- React
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Progress tracker
Atlassian Design System
- React
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Progress Indicator
Aurora
Government of Canada
- CSS
- Code examples
- Tone of voice
- Open source
- Unmaintained
Progress bar
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Progress Steps
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
Progress indicator
Carbon Design System
IBM
- React
- Vanilla JS
- Angular
- Vue
- Svelte
- Web Components
- Code examples
- Usage guidelines
- Open source
Stepper
Cauldron
Deque
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
Timeline
Clarity Design System
VMware
- CSS
- Angular
- Web Components
- Code examples
- Usage guidelines
- Open source
Stepper
Coral
Talend
- React
- Code examples
- Tone of voice
- Open source
Progress tracker
Dell Design System
- Vanilla JS
- Code examples
- Usage guidelines
Progress stepper
eBay Playbook
- HTML
- React
- Code examples
Steps
Elastic UI framework
Elastic
- React
- Sass
- Code examples
- Open source
Stepper
Elisa Design System
- React
- Usage guidelines
- Code examples
- Accessibility
Stepper
Flowbite
- Tailwind CSS
- Open source
- Code examples
Progress indicator
GOLD Design System
Design System AU
- React
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
- Unmaintained
Stepper Indicator
Helios
Hashicorp
- Ember
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
ProgressBar
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
ProgressCircle
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
Path
Lightning Design System
Salesforce
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Progress Indicator
Lightning Design System
Salesforce
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Stepper
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Stepper
Morningstar Design System
- Vue
- Usage guidelines
Progress
Nucleus Design System
British Gas
- Web Components
- Usage guidelines
Timeline
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Progress indicator
Oxygen
Repsol
- HTML
- Code examples
- Usage guidelines
Stepper
Pajamas
GitLab
- Vue
- Usage guidelines
- Code examples
- Open source
Progress stepper
PatternFly
Red Hat
- React
- Sass
- Tone of voice
- Open source
- Usage guidelines
Stepper Horizontal
Porsche Design System
- Web Components
- Angular
- React
- Vue
- Code examples
- Open source
Stepper
Quasar Framework
- Vue
- Accessibility issues
- Code examples
- Open source
Progress Radial
Ruter Components
- React
- Code examples
- Unmaintained
Progress ring
Shoelace
- Web Components
- Code examples
- Open source
Stepper
Spark Design System
Quicken Loans
- React
- Angular
- Code examples
- Usage guidelines
- Open source
- Unmaintained
Meter
Spectrum
Adobe
- CSS
- Web Components
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Progress Navigation
uStyle
uSwitch
- Sass
- Tone of voice
- Code examples
- Usage guidelines
- Open source
- Unmaintained
Horizontal steppers
Vattenfall Design System
- HTML
- jQuery
- Sass
- Code examples
- Open source
Progress indicator
W3C design system
- Sass
- Vanilla JS
- Code examples
- Usage guidelines
- Open source
- Accessibility
Progress indicator
West Midlands Network Design System
- HTML
- Nunjucks
- Sass
- Code examples
- Usage guidelines
- Open source