Progress Indicator

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.

Incorporate subtle animations or transitions that reward the user for progressing. This not only enhances the visual appeal but can also motivate users to continue towards completion.