10. Progress indicator

Use a progress indicator to show the progression of a specific action.

Progress bar - Emails

When the progress status and action completion time are known, use a progress bar instead. It’s recommended that you provide a progress bar in an isolated area, such as an app bar, rather than covering the whole screen with it, so that it doesn’t affect the current task.

Progress circle - Wi-Fi

Use a progress circle to let the user know that an action can’t be executed immediately and it will take a certain amount of time. However, it’s recommended that you use it only when the action completion time is not known.

Progress circle - Screen

Display progress icon on the body or the button which is just tapped to avoid disturbing the user flow. Covering the screen with a progressing pop-up should be avoided.
When there is a landing page for the user's action, go to the page and show the basic elements first, such as app bar, toolbar, and then appear the Progress loading icon on the content area which is uploading.

[Don't]
[Do]

Progress circle - Button

If the user’s action affects on the current screen or if the landing page cannot be specified according to the condition, show Progressing icon on the button which is action is taken.
When it is difficult to offer proogress circle on the body of the contents, show it on the button which is tapped. Use the action button to show the progress status.

[Don't]
[Do]