Gallery

Design a progress indicator component for a product flow where users need clear feedback on how far they are through a task. Focus on one component system that can work in both full-width and compact layouts, not a generic animation exercise.

Show determinate progress at several points: 0%, 25%, 50%, 75%, and 100%. Include a label or percentage readout, and make sure the current state is understandable even if color is removed. Add an indeterminate state for loading, plus a completed state that reads as finished rather than still active.

Adapt the same visual language into three forms: a horizontal bar for forms and onboarding, a step indicator for multi-step setup, and a circular version for tight spaces like cards or side panels. Keep spacing, thickness, and typography consistent across variants so they feel like one system.

Place the indicator in a realistic UI context, such as the top of a setup page or above a form section, and show how it behaves next to supporting text or a primary action. The component should make progress feel immediate, stable, and easy to scan.