Challenge #004 - Progress Button

- Takes about 3 minutes to complete

We’re starting the new year with a beauty of a challenge. It might look straightforward from the outset, but as usual with a Front-End Challenges Club challenge, as we dig into the details, there’s a lot to consider.

This fourth challenge is free to participate, but the solution to the challenge will be for paying members only, so subscribe to see the upcoming solution.

What you’re building

Demo shows progress button loader increase in width after click until it hits a green success state. The same process starts again with a red error state showing instead.

The brief

Take the design assets and re-create this progress button with whatever front-end technology you want. Consider how state is managed and how the button works when there is no JavaScript available. If you do the legwork upfront, you’ll make the whole process a lot easier with this one.

Make sure that your challenge solution does the following as a minimum:

  • Uses semantic elements
  • Is usable with mouse, touch and keyboard
  • Presents an acceptable focus state (pro-tip: this should be additional to the hover state)
  • Uses aria roles effectively to announce state changes

Bonus points awarded if:

  • You create a solid state management system
  • Your solution is lightweight and performant
  • Your solution is fully accessible
  • You create appropriate transitions and/or animations between states


I’ve used Figma to design this challenge and you can run it with a completely free account!

Here’s some assets to get you going:

Here are some CSS Custom Properties for your colours:

:root {
  --color-primary: #21223e;
  --color-primary-light: #3c3f73;
  --color-success: #0c8d87;
  --color-error: #c01332;
  --color-light: #ffffff;


This challenge is for you to learn and if you want to just want keep it to yourself, that’s all good. If you want to share it with the Front-End Challenge Club Community, tweet a publicly accessible link, using the hashtag: #FrontEndChallengesClub or directly to @FEChallengeClub and I’ll pick up and link to my favourites in my solution post.

Wrapping up

Enjoy this challenge and remember: we’re all in this together, so if folks have questions, tweet using the hashtag #FrontEndChallengesClub or tweet directly to @FEChallengeClub.

Only paying members get to see my solution to this challenge, so make sure you subscribe to a paid plan.

See you at the next one 👋

Other challenges

  1. #006 - Auto-scrolling, responsive grid

  2. #005 - Tabs

  3. #003 - Duotone Card

  4. #002 - Toggle switch

  5. #001 - Email sign-up form

Sign up for a membership

Front-End Challenges club members get all sorts of benefits, including:

  • Full access to all content
  • Access to a private community of other members
  • Access to exclusive AMA sessions

Membership starts at $10 per month or $95 per year.

Sign Up For A Membership