A step indicator uses numbered circles and connecting lines to show progress in multi-step flows (checkout, registration, wizard). Each step has three states: completed (green checkmark), active (highlighted), and inactive (gray). It provides the psychological anchor of "how much further."
Key implementation: Three-color encoding (green/red/gray) for instant recognition. Connecting line color follows the preceding step's state. Use checkmarks for completed steps. Add transition: 0.3s on all color changes.
Common pitfalls: Too many steps overflow on mobile (show current ±1 with ellipsis). Uneven connecting lines without flex:1. Forgetting to re-render when navigating back. Allowing jump-ahead to incomplete steps.
Variants: Vertical layout for long flows, progress bar hybrid, inline forms, dynamic step count, hover preview.
Full copy-paste code available above. Questions? Leave a comment.
Top comments (0)