Progress

Progress

Usage

A progress tracker is progress indicator component communicates or displays the steps and progress through a journey of a particular process.

Amount of step

Two

Usage : Sidebar navigation menu is a list of primary menu that usualy used or have a high priority functions. This navigation is always shown, and the menu is static.

Up to Six

Usage: The maximum amount of progress indicator that provided is up to six step.

Point Item

Dot

Usage: Dot Point Item type in progress indicator doesn’t have any specific requirement usage. It’s a default pointer that usualy used in progress indicator.

Text

Usage: Text Point item type in progress indicator usualy used when the step has a specific step to do regarding particular process. It’s usualy used to make the number of the step more clearer.

Icon

Usage: Text Point item type in progress indicator usualy used when the step has a specific step to do regarding particular process. It’s usualy used to make the number of the step more clearer.

Label

Specific Label

Label

Label

Label

Label

Usage: Specific label type usualy used to make each step in progress indicator more clearer and related to the context of the step. This is can be used when the step in progress indicator is limited so the space is available to create label below the step.

General Label

Label

Label

Label

Label

Label

Usage: General label type usualy used when the step in progress indicator has a large amount, so the space is very limited and imposibble to make a specific label below the step. So, to make it simpler, the label combined into one, and regulary changed after one step is finish.

Alignment

Horizontal

Label

Label

Usage: Horizontal aligment progress indicator usualy used in small space, and limited step.

Vertical

Label

Label

Usage: Vertical aligment progress indicator usualy used in very big space and large amount step.

Pattern Rule

Best Practice

• Use a maximum of seven dot indicators to keep the user’s journey concise.
• Typically accompanied by a carousel or another UI device.
• Use a progress indicator to step a user through a journey so that they can keep track of their progress.