Centered Progress Bar Hero Block for React

PROGRESS at the top of the file is the bar's value, in percent. Each milestone in MILESTONES has a label and a threshold, the percentage where it is reached. The four cells are quarters of the bar, so each cell ends at its threshold: keep four milestones 25 apart for the dividers to fall where the bar passes them. A milestone is Reached once PROGRESS gets to its threshold, the first one it hasn't reached is In progress and the rest are Up next, all worked out from the one number.

Work the percentage out where the page renders (sign-ups so far divided by the goal, rounded) and pass it in place of PROGRESS. The bar, its percentage and the states of the milestones all follow from that one number, and since the value is in the server's HTML the bar is right before any script runs.

It's CSS. A starting: style (@starting-style) draws the fill at nothing for the first frame, and a one-second transition, after a short delay, takes it to its value. With reduced motion there's no transition: the bar is drawn at its value at once, and the rest of the hero skips its entrance too.

The bar is a progress bar named Progress to launch, with its value, 73%. The milestones are an ordered list named Milestones, and each one is read with its state: Alpha, Reached, through Launch, Up next. Their check marks and circles are decorative. The headline is the page's one h1, and the pill and both calls to action are links named by their text.

The band keeps all four cells in one row, so the dividers stay under the bar's quarter marks; a long label such as Private beta wraps onto two lines rather than running into its neighbour. The two calls to action stack below the sm breakpoint, and the Shine Button ends about 580 px down the first screen.

Use progress when the launch depends on reaching a goal: sign-ups, funding, features shipped. Showing how close you are invites visitors to help close the gap. Use a countdown when the date is fixed and the time left is the urgency.