State the work being processed
Do not display percentage if the system has not measured actual progress.
Loading Design system
Indicates the task is in progress and when it needs to be processed.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
03
Complete the experience
Check for details that are easy to miss when putting the design into use.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
State the work being processed
“Processing 4 files” instead of a long fixed 99% progress.
Variants and use cases
Waiting notice form
Select spinner, progress bar or skeleton according to knowable information about the task.
Try tasks without total size; Avoid assigning fake percentages.
Example Load a file with a percentage bar; Reading URL information only shows processing status.
The content explains the wait
State the task in progress and the next step when the wait time is longer than usual.
Emulates slow response; Need state helps realize the application is still processing.
Example After a few seconds, "Reading video information, please wait" appears.
Loading content
Context of the process
Place the indicator in the correct loading area and keep the content usable.
A failed loading widget should not turn the entire dashboard into a full-page spinner.
Example The revenue block says waiting while the request list can still be processed.
Loading content
Keep context and report progress when possible.