Progress Tracker

Progress Trackers serve as visual guides that help users understand where they are within a multi-step process or experience. They provide a clear sense of progression, showing completed steps, the current step, and upcoming steps in a linear flow.

Interactive Progress Tracker

An interactive progress tracker guides users through a multi-step process by visually indicating their current position, allowing them to navigate between steps. It improves usability by providing orientation and direct access to completed or upcoming steps, often used in forms.

Breackpoints

Desktop

Step
2
Step
3
Step
4
Step
5
Step
6
Step
7
Step
8
Step

Mobile

Step States

current

1
Step

completed

1
Step

incomplete

1
Step

blocked

!
Step

current

1
Step

current

completed

incomplete

blocked

current

Orientation

Desktop

Horizontal

Step
2
Step
3
Step
4
Step
5
Step
6
Step
7
Step
8
Step

Vertical

1
Step
2
Step
3
Step
4
Step
5
Step
6
Step
7
Step
8
Step

Mobile

Horizontal

Step
2
Step
3
Step
4
Step
5
Step
6
Step
7
Step
8
Step

Vertical

1
Step
2
Step
3
Step
4
Step
5
Step
6
Step
7
Step
8
Step