Front-End challenge: progress indicator

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 permalink

  • 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 permalink

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:

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

Wrapping up permalink

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.