Timeline Event Card Stats Block for React

Edit STEPS at the top of the file. A step has a name, a state (done, current or next), the seconds it took or has run so far, and how long it typically takes. STARTED is when the run began, in seconds after midnight UTC. Start times, the time elapsed, the expected finish, the bar widths and the headline are all computed from these.

All eight bars share one scale, where the longest step (finished or expected) is the full bar. A finished step is a solid bar. The running step is solid for the time spent so far inside an outline of its usual length, and a step to come is only the outline, so the card never shows time that hasn't happened.

Only once. The running step's ring expands one time when the page loads and is gone, and the header and timeline fade up once. With reduced motion there is no ring animation. The card is a snapshot: it does not tick, and the times shown are fixed in the data.

Yes. It is an ordered list, and each step's name is a heading that starts with a hidden word for its state: "Done", "Running" or "Up next". The bars and the nodes are decorative because the time and the duration are written as text. Times are time elements, and digits stay left to right in right-to-left layouts.

The facts come first, then the timeline, with a rule between them. The divider between the two columns appears from lg. Nothing scrolls sideways at 320 pixels.