Front-End challenge: progress indicator

Categories

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
css
: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.

Hello, I’m Andy and I’ll help you to level up your front-end development skills.

I'm a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I'm the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.