The answer
((currentStep + 1) / steps.length) * 100. For example, step 2 of 4: ((2 + 1) / 4) * 100 = 75%. Wait, step 2 of 4 (0-indexed): ((1 + 1) / 4) * 100 = 50%. Use currentStep + 1 because steps are 0-indexed.
Tab Form Progress Indicator Implementation
How do you calculate the percentage for a linear progress indicator in a multi-step form?
More FAQs in Tab Form Progress Indicator Implementation
Two options: linear (a progress bar with width = ((currentStep + 1) / steps.length) * 100) or stepped (dots with completed/active states connected by lines). Update on every step change. Completed steps are green, active is blue.
Create dots for each step. For each dot: add 'completed' class if index < currentStep, 'active' class if index === currentStep. For connecting lines: add 'completed' class if index < currentStep. Update on every step change.
Dots: circular (border-radius: 50%), fixed size, centered text. Lines: flex: 1, thin height (2px). Completed: green background. Active: blue background. Default: gray background. Use display: flex on the container with align-items: center.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.