Progress bar
The horizontal bar that fills up to show how much of an upload, download, or other task is complete.
See it
What it is
A progress bar is a horizontal track that fills from start to finish as a task advances. A determinate bar represents a measured value, such as 37 of 100 files uploaded. An indeterminate bar moves without claiming a percentage when the total or remaining time is unknown. HTML provides a native 'progress' element for both cases.
Reach for one when a wait is long enough that people need proof the work is moving and some sense of what remains: uploads, downloads, imports, installs, and multi-step processing. Pair it with a plain status label such as 'Uploading 3 of 8' when the number matters more than the shape.
Gotcha: false precision destroys trust. The Windows file-copy dialog earned a decade of jokes for racing to 99% and then sitting there. Do not march steadily to 95% and stall unless the work really behaves that way. Base the fill on completed units when possible, switch to indeterminate when it is not, and never use animation as the only signal that a job failed or finished.
Ask AI for it
Build a linear progress bar with the native HTML 'progress' element. Set max='100' and update value from real completed work; omit the value attribute for the indeterminate state. Show a text label and right-aligned percentage above a 6px rounded track, style the fill with ::-webkit-progress-value and ::-moz-progress-bar, and expose status changes in a separate aria-live='polite' region. Animate measured value changes over 180ms, but disable that transition under prefers-reduced-motion.