Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography

Layout
Modals
Modals / Confirmation
Panels
Tabs

Actions & Inputs
Buttons
Checkboxes
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields

Status & Feedback
Badges
Progress Indicators
Tooltips

Progress indicators visually provide user feedback on the time elapsed or the completeness of a process or task in the system.

◢

Overview 

Progress indicators should be chosen based on the guiding principles of context, timing, and completeness.

Guiding Principles
Context: right information at the right time
Timing: less feedback for shorter tasks, more details for longer or complex tasks
Completeness: by the length of time the process or task takes to complete.

Status Feedback
Progress indicators can be combined with additional status feedback.
Status feedback should be clear and direct. Limit verbiage and information.

User dependent task
Progress indicators should not be used to indicate the completeness of a user dependent task. 

USE CASES:

Uploading an image.

Importing or exporting large datasets.

Completing a save action.

Anatomy

1. Fill
The amount of the task that has been completed.

2. Path
Shows the amount of time or progress remaining in the task.

Determinant Progress is a known amount of time or completeness for a task to complete.

For horizontal instances, The fill extends along the path of the indicator until the task complete.

Indeterminant Progress is an unknown amount of time for a task to complete.

For horizontal instances, the fill expands and contracts as it travels the length of the path until the tasks is complete.

Principles of Timing