Progress bar - ActivityUse: Deployed
A progress bar provides status as the system is taking an action on behalf of the user.
View va-progress-bar in Storybook
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.
- 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.
- 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)
- 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.
Attributes and Properties
||Whether or not an analytics event will be fired.|
||The text label for the progress bar.|
||Percent of progress made. 0 to 100.|
||The event used to track usage of the component. This is emitted when percent is 0 or 100 and enableAnalytics is true.|