LinearProgress

Base UICopy Anchor Link

LinearProgress shows task progress on a compact horizontal track with a native progressbar role. Pass a numeric value when the percent is known (uploads, exports, checklists). Set value={null} while duration is unknown — the root gets data-indeterminate and omits aria-valuenow until a number returns.

label names the bar for accessibility; add description for supporting copy under the track, and renderValue when the percent (or a custom formatter) should sit beside the label. For a compact bar with no visible label, supply aria-label on the root instead. The indicator animates with theme motion tokens.

When to useCopy Anchor Link

• A task with a known percent or bounded numeric value (upload, export, checklist)
• Background work whose duration is unknown (value={null})
• A labeled track where the percent itself should be visible (renderValue)

When not to useCopy Anchor Link

• Static capacity or score within a range (storage, quota) → Meter
• Layout placeholders while content structure loads → Skeleton
• A short opaque wait with no track metaphor → Spinner
• An interactive value the user drags → Slider

RelatedCopy Anchor Link

• Meter — read-only fill level for capacity and scores
• Skeleton — structure-preserving placeholders
• Spinner — compact busy chrome without a track
• Slider — adjustable values on a track

Common examplesCopy Anchor Link

Labeled determinateCopy Anchor Link

An upload or export row with label, a numeric value, and renderValue is the usual determinate shape. Optional description adds muted helper copy under the track.

Custom value slotCopy Anchor Link

Pass a function to renderValue when the readout needs units or counts instead of the default percent string. The callback receives the Base UI formatted string and the numeric value (null while indeterminate).

Indeterminate syncCopy Anchor Link

When the job is running but the percent is unknown, pass value={null}. Keep a visible label and helper copy so the row still explains what is in flight.

Track-only cardCopy Anchor Link

Inside a goal or summary card, drop the visible label and name the bar with aria-label. Surrounding Surface and Text carry the headline and caption row.

Ask your agentCopy Anchor Link

Show upload progress at about 40% with label Upload and supporting copy under the bar that files are uploading.