Gallery

Design a status bar component for showing a task in progress, such as upload, sync, scan, or update. Treat it as a reusable UI element, not a one-off illustration. The bar should make current status obvious at a glance, with a clear fill level, supporting text, and a compact value readout.

Start with the default in-progress state: track, filled portion, label, and percentage or elapsed/remaining time. Keep the hierarchy tight so the user can tell what is happening, how far along it is, and whether it is still moving. If you use animation, it should reinforce direction and progress, not compete with the label.

Add adjacent states for complete, paused, and error. Completion should resolve cleanly. Paused and error states should preserve context and offer the next action directly in the component. Define how color shifts, iconography, and motion behave across states so the pattern feels consistent wherever it appears.