Dashed circular progress bar

Progress counted in steps, for onboarding, quizzes or streaks: ten arcs split the ring, one per step.

How it's built

  • Ten <o-arc> without value share the ring equally, so ten arcs are ten steps. Twelve arcs would be twelve.
  • --o-gap: 8 on the ring opens the space between dashes, for all of them at once.
  • Each step is a class: .done fills it, .now makes the next one breathe with a CSS animation.
  • The universe is a role="progressbar" with aria-valuemax="10", so the count is read as steps, not percent.

To name each step, add a second ring further out with one satellite per arc. Same count, same ring: each name sits over its dash.

Related