The answer
Use circular for loading states, countdown timers, and dashboards (compact, visual). Use linear for file uploads, downloads, and task completion (shows proportion clearly). Use stepped for multi-step forms.
Progress Bar Types: Linear, Circular, and Stepped
When should you use a circular vs linear progress bar?
More FAQs in Progress Bar Types: Linear, Circular, and Stepped
Linear (horizontal bar with width %), circular (SVG ring with stroke-dashoffset), and stepped (discrete steps with active states). Also striped (animated stripes) for indeterminate progress.
Use two SVG circles. The background circle has a gray stroke. The progress circle has stroke-dasharray set to the circumference (2 * PI * radius) and stroke-dashoffset set to circumference - (percent/100 * circumference). Rotate -90 degrees.
Create step elements in a flex row. Toggle an 'active' class based on the current step: step.classList.toggle('active', index <= currentStep). Style .active with a different background color.
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.