Skip to main content
Frontend Glossary

UI components · Feedback

Progress

Also called: Progress bar, Progress ring, Progress indicator, Loading bar

A bar or ring that gradually fills up to show how much of a task is done, so users know how long they still have to wait.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

While a file uploads, show a 6px-tall progress bar under the file name, with a gray track, a dark fill, and the percentage on the right. When the upload finishes, switch to a check mark and "Done." If it fails, turn the bar red and show a "Retry" button. Animate progress changes smoothly; don't let it jump.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Progress is what you need.

Use Progress when

  • Upload, download, export, and other long tasks where you can get the actual percentage done
  • Showing percentage data like task completion or quota usage
  • The wait is longer than a few seconds, and users need to know how much longer it will be

Pick something else when

  • You can't get real progress and are just waiting for an API response; a spinner is more honest

    Use insteadSpinner

  • The page is loading for the first time and the content layout is known; a skeleton feels better

    Use insteadSkeleton

  • Showing which step of a multi-step flow the user is on; steps fit better

    Use insteadSteps

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Faking progress with no real data, moving steadily to 99% and then getting stuck

  2. 02

    Using only color with no percentage or text, so users don't know the actual number

  3. 03

    The task failed but the bar just stays where it was, with no error state

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A track plus a fill segment sized to the percentage, often with percentage text or a status icon. The ring version uses two layers of arcs.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A progress bar fits waits where progress can be measured: uploading files, exporting data, installation steps. It can also show how complete a form is or how much storage is used. It's usually a gray track with a darker section that grows longer, with a percentage next to it. It can also be a ring, placed in a card or dashboard to show "72% complete." If the task fails, the progress bar should switch to an error state instead of freezing where it was.

How the waiting components split the work: Progress is for when you know the progress. A Spinner is for when you don't know how long it will take, usually just a second or two. A Skeleton is for the first load of a page or list, drawing the outline of the content first. Also don't mix it up with Steps: steps show which step of a flow you're on, while a progress bar shows how much of one task is done.

Developer info
Term ID
component-progress
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • progress
  • [role="progressbar"]
  • .ant-progress
  • .el-progress
  • [class*="MuiLinearProgress-root"]
  • .arco-progress
  • .t-progress
  • .n-progress
  • [data-slot="progress"]
  • .progress
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026