Front-end education for the real world. Since 2018.

— From set.studio

Front-End challenge: progress indicator

Published:

Written by: Andy Bell

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.