Front-End challenge: progress indicator

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:

Points to considerpermalink

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

Assetspermalink

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

• Figma composition
• Space Mono font

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

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

Wrapping uppermalink

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.