A. Indicator

The indicator communicates the actual progress in a progress indicator, and the loading status in a processing indicator.

B. Track (progress indicator only)

The track is the base of the indicators showing the overall process.

C. Icon (optional for progress indicator only)

An optional icon can be added to a progress indicator if a user interaction with the indicator is allowed during the loading process. A stop icon is frequently used to terminate the process.

Anatomy of a processing indicator (left) and a progress indicator (right)

The processing indicator and progress indicator can be used together in a user flow. For example, when a download button is tapped, it changes to a processing indicator while the data transfers, then switches to a progress indicator to show the download status. The progress indicator can be replaced with another button once the whole process is finished. The user can tap on the progress indicator with a stop icon to terminate the progress.

Behavior of a progress indicator

A processing indicator is used when the request is being processed, and the percentage of progress is unknown. It can be changed to a progress indicator once the progress starts.

Example of a processing indicator

A progress indicator shows the current stage of a process. It displays how long a process will take. It can include an optional button to allow the user to take an additional action during the process, such as stopping the download process.

Example of a progress indicator