Progress bars communicate system information, like how much cloud storage someone is using in OneDrive, or task information, like how long until a download is complete.
Progress bars should only be used for tasks that take longer than a second. If you’re loading new content with a known structure that doesn’t block the UI, try a skeleton.
Static progress bars
Use progress bars with no animation to communicate a static percentage. For example to show system progress scenarios, like indicating how much storage is left.
Determinate and indeterminate
Progress bars can be either determinate or indeterminate, depending on the needs of your app and the capabilities of the technology you’re building on.
Determinate progress bars let people know how much of a task has been completed and how much remains. Use determinate progress bars whenever possible. They offer a better user experience than indeterminate progress bars since they communicate status and assure people things are still working.
Sometimes, it’s not possible to gauge how long something will take and it’s necessary to use an indeterminate progress bar. Indeterminate progress bars don’t provide any reassurance that things are still working, so only use them for short tasks. Watching the bar cycle for too long could make people think something’s gone wrong.
If enough data is gathered after a task starts and it becomes possible to communicate how much time is left, switch to a determinate progress bar. If there’s very little time left, complete an animation cycle before transitioning from the loading state. Don’t interrupt an indeterminate progress bar in the middle of an animation.
Combine related steps into one progress bar to avoid “rewinding” the bar. For example, if checking for updates, and then installing updates, only show one progress bar and change the status text when the installation starts but continue to move the progress bar forward from the same point.
When the bar appears to move backward, people lose confidence in it.
Combine multiple steps of a longer task into one progress bar
Restarting the progress bar for each task step can make people lose confidence
A progress bar can appear in a new drawer, in a callout, or under the UI that initiates the task. It can even replace the initiating UI if the UI can return to its original state if the task is canceled.
If the task can be canceled, place a Close button in the upper right, aligned with the baseline of the progress bar label.
1. Label (optional) is short and clear. Use sentence case with no period.
2. Status (optional) communicates what’s happening now or how much progress has been made. Use units that are informative and relevant.
Keep labels short and clear
Include a short label above the progress bar that describes what’s taking place. Don’t include a period.
Use status text to communicate what’s happening now
Place information about the status below the progress bar. For example, “Installing 5 of 20 updates.” Use units that are informative and relevant to give the best idea of how long the task will take to complete. Avoid time units. They’re rarely accurate enough to be trustworthy.
Don’t put a period at the end of the status text.
When an error occurs, replace the status text with an error message.