Progress bar - Activity

Examples

View va-progress-bar in Storybook

Usage

When to use an activity progress bar

• System status feedback: When you need to provide feedback to the user that an action they initiated is progressing. The most common example is when a user must upload a file and needs feedback that the upload is progressing.
• When the action is determinate: When the progress accomplished thus far and the remaining progress to be taken can be shown. This component takes a percentage as input to display the progress of the activity.

When to consider something else

• Step indicator for forms: When you are providing feedback on the number of steps in a process, for example when a user is filling out a form, use the segmented progress bar.
• Unknown or indeterminate time: When the wait time for a process, such as loading a page, is unknown use the loading indicator.

Behavior

• The activity progress bar should fill until the activity is complete.
• The activity progress bar should not return or retreat once it progresses. In other words, progress should never go backwards.

Placement

• The activity progress bar should be placed near or, or proximate, to the interface element that trigger the activity (e.g. a file upload button)

Design principles

• Visibility of System Status: This is the first of 10 usability heuristics defined by Jackob Nielsen.

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

Code usage

Attributes and Properties

Events

Related

• Progress bar - Segmented
• Loading indicator