Delivery timeline

Use it for

• Email, messaging and webhook products that track delivery
• Order and shipment status in a feature section
• Any short, fixed sequence of events with timestamps

Avoid

• Real tracking, where steps come from the server and timing varies
• Sequences longer than about six steps, which get cramped

How it works

A single step index drives everything: steps at or before it get a data attribute, and CSS transitions do the rest. The rail fill is scaleX on a custom property, then each node fills, draws its check with stroke-dashoffset and pings a ring after a short delay, so the line leads and the step lands. Timestamps slide in after the check, and the status badge remounts on each change with a nudge on the last one.

Accessibility

The animated timeline is aria-hidden and a visually hidden sentence states the final status and every timestamp once. Replay is a real button. The loop stops off screen and after a manual replay; reduced motion opens on the finished timeline with no pings or nudges.