Progress

You might say

Show upload progress so people don't think the file upload is stuck.

Show how much of a task has been completedA progress indicator helps people understand the state of an upload, installation, or multi-step task. Use a percentage when the total is known; otherwise show ongoing activity without pretending to know the finish time. State success, failure, and cancellation clearly.

Uploading...66%

Quick checkChoose the best answer

A 200MB upload reports uploaded bytes. What feedback should be used?

Show real Progress percentage or uploaded size, with retry on failureShow only a continuously spinning SpinnerImmediately show upload complete while it continues in the background

You can say this to an AI Agent

Use real uploaded-byte events to update Progress, showing percentage or size and retaining a retry state for network failure. Upload a test file and interrupt it once; confirm progress follows real events and failure is never shown as complete.

Progress≠Spinner

Progress uses a track to show overall completion and can show a percentage when it is measurable. spinner usually marks a brief local wait with no known completion ratio.

Progress≠Steps

Progress shows continuous completion. Steps names the stages so people know where they are in a process.

When to use it

File upload
📎 design-file.sketch66%
Import or export
Getting started3/5
Installation
Storage6.6 / 10 GB
A task with measurable completion
Exporting 1,024 records…42%

When NOT to use it

Show a fake percentage when progress is unknown
Loading, please wait…
Leave a completed task stuck below 100%
Saved
Use animation without a readable status
66%Storage used
Hide failure or cancellation behind the same loading state
Uploading…12%
Stuck at 12% for 10 minutes.

Anatomy

Uploading...

66%

The entire component, strip is the most common form

The gray bottom slot represents the total amount

The completed part grows in real time

What is being done, such as "Uploading..."

Specific numbers to ease waiting anxiety

Variants

Line

Uploading...66%

Default form, horizontal progress such as uploading and downloading

Circle

66%

When the location is tight or you want to highlight the percentage number

Success

Upload completed

After the task is completed, keep the final progress and explain the results

Exception

Network interruption, upload failed

If it fails halfway, stop at the error location and explain the reason.

Typical use cases

Upload

📎 Homepage design draft.fig2.3 / 3.5 MB

Uploading...66%

Data import

80%

Data completeness Upload your avatar to unlock all functions To improve →

Installation

Storage Space6.2 / 10 GB used

Photos 3.8 GB · Documents 1.6 GB

Profile completion

⬇ Export order data in batchesIn progress

Exporting the 3rd / 5th file, please do not close the page