Progress

Use Progress for operations taking more than 2-3 seconds: file uploads, downloads, processing, multi-step forms, loading content. They reduce perceived wait time by showing activity and estimated completion, preventing user anxiety about whether something is working.

Determinate shows specific progress (0-100%), like "25% complete" for file upload. Indeterminate shows activity without specific progress (animated bar), used when duration is unknown, like "Processing..." Use determinate when possible—it's more informative.

For important operations, yes! Combine visual bar with percentage text for maximum clarity: "Uploading... 67%". Text ensures everyone can understand progress, even if they have difficulty perceiving visual changes in the bar.

For operations taking minutes, provide more context: show time remaining ("2 minutes left"), allow cancellation, or break into steps ("Step 2 of 5"). Long waits are frustrating; detailed feedback and control options improve the experience significantly.

Yes! Mini progress indicators work well in buttons during async operations like "Save" or "Submit". Show spinner or progress, disable the button, and keep the action label visible so users know what's happening and can't double-submit.

Yes, this Figma Progress component matches the shadcn/ui implementation exactly, ensuring your progress indicators display consistently from design to production with proper animations and accessibility attributes.