Progress Indicators
Progress indicators inform users about the status of ongoing processes, such as loading an app or submitting a form.
Last updated
Was this helpful?
Progress indicators inform users about the status of ongoing processes, such as loading an app or submitting a form.
Last updated
Was this helpful?
Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen. There are two types of progress indicators.
A determinate progress indicator displays a progress bar or percentage indicator that shows how much of a task has been completed.
An indeterminate progress indicator does not display the progress of a task but shows that a task is ongoing.
The primary function of a progress indicator is Feedback. These indicators provide feedback to users depending on the task they are performing. Determinate and Indeterminate indicators have slightly different feedback mechanisms but convey a similar intent.
The aesthetic and emotive functions apply more towards indeterminate loaders as they have to keep the user waiting for an unknown amount of time; as such, the impact that aesthetics can have is maximized in this process.
Determinate progress indicators have straightforward feedback functions. In both the above examples, there is a set path that the indicator has to travel to let the user know that progress is being made. The principle of value change is used here to communicate the state of progress.
Indeterminate progress indicators have feedback functions informing the user of an action related to the interface. In the first example, a pulse is constantly sent out from a location, giving the user feedback that it is looking for something nearby. In the second interaction, the skeleton loader helps inform the user how the interface and contents will look and that information is being retrieved.
Indeterminate loaders can also be purely aesthetic in function. The above loader microinteractions are indefinite loops that help reflect brand values and inject a sense of delight while waiting during a loading section. The principles of easing and transformation are heavily used to match real-world physics.
Feedback Function
Aesthetic Function
Emotive Function
