Front-End challenge: progress indicator

Published on by Andy Bell

Front-End Challenges Club is back! It’s been a long while since the last one and this challenge is a real head scratcher.

Ooof it’s been a while since there was a Front-End Challenges Club. Just [checks notes] 3 and a half years…

This is a handy little component that visually shows progress on a circular path. On the surface, it looks simple, but there’s lots to consider with state and how assistive technology can understand it.

Here’s the default and completed state:

On the left, a progress indicator with 25% progress. On the right, a completed one where the text has been replaced with a checkmark

Points to consider

  • What is the experience going to be like when someone doesn’t have JavaScript enabled?
  • What technology is best suited for this component?
  • How can JavaScript and CSS communicate well?

Assets

I create a Figma composition for this challenge, which you can view either with a free account or anonymously. Here’s some links:

Here’s some CSS Custom Properties you might find useful too:

css
:root {
  --font-base: 'Space Mono', monospace;
  --color-dark: #1f1a38;
  --color-dark-glare: #989ea9;
  --color-success: #76f7bf;
}

Wrapping up

I’ll publish my solution to this challenge soon. Until then, have fun building it!

If you share your version, make sure you let me know and as always, I’ll pick my favourite and share it with you in my solution post.