Live Delivery Route Tracker UI — Free HTML CSS JS Snippet

Every food delivery, ride-share, and e-commerce logistics app needs some version of the same widget: a visual representation of a vehicle moving from A to B, with a live estimate of when it will arrive. This snippet builds that widget from first principles using nothing but an SVG path, requestAnimationFrame, and the browser's native getPointAtLength() API — no mapping library, no external tile server, no dependency. The result is a stylized, illustrative route (not a literal map) that is fast to render, trivially themeable, and perfect for dashboards, order-confirmation screens, or marketing pages that want to show delivery progress without the weight of a real map SDK.

Why `getPointAtLength()` is the right tool for path-following animation

The core technical trick is SVG's SVGGeometryElement.getPointAtLength(distance) method, available on any <path> element. Given a distance travelled along the path (in user units, starting from 0 at the path's start), it returns the exact {x, y} coordinate at that point — including on curved segments defined by cubic Bezier C and smooth S commands. This means the vehicle icon can follow a genuinely curved, winding route without any manual interpolation math. The snippet first computes path.getTotalLength() once to get the path's full length in user units, then on every animation frame calculates a progress value between 0 and 1 (elapsed time divided by total trip duration) and calls getPointAtLength(progress * pathLength) to get the vehicle's current {x, y}. That coordinate is applied directly as a CSS transform: translate(x, y) on a <g> element nested inside the same SVG, so the vehicle marker glides smoothly along every curve of the dashed route line.

Driving the animation with requestAnimationFrame

Rather than a fixed-interval setInterval, the animation loop uses requestAnimationFrame, which self-schedules against the browser's repaint cycle for smoother, jank-free motion and automatically pauses when the tab is backgrounded. The loop records a startTime on the first frame, then on every subsequent frame computes elapsed = timestamp - startTime and derives progress = elapsed / DURATION_MS, clamped to a maximum of 1. This time-based (rather than frame-count-based) approach keeps the animation duration consistent regardless of the device's refresh rate — a 60Hz and 144Hz display both complete the trip in exactly DURATION_MS milliseconds.

Live ETA countdown and milestone status text

As progress advances, two more pieces of UI update in lockstep. The ETA pill recalculates remainingMin = Math.ceil(TOTAL_MIN * (1 - progress)), so the countdown ticks down in whole minutes as the trip proceeds and reads "Arrived" once progress reaches 1. Separately, a statuses array defines four milestones as { at: fraction, title: string } pairs — 0% "Order picked up", 8% "On the way", 78% "Arriving soon", 100% "Delivered". On each frame, setStatus() finds the highest milestone whose at threshold has been crossed and fades the status heading to that milestone's title using a brief opacity transition, while a horizontal milestone list highlights the current step and marks earlier steps as .done with a green dot.

Waypoints, progress bar, and restart control

Two intermediate SVG <circle> waypoints sit along the dashed path purely as visual landmarks, echoing how consumer delivery apps show waypoint dots between pickup and destination pins. Beneath the route, a slim progress bar mirrors the same progress value as a linear percentage, giving users a second, more literal read on how far along the delivery is. A "Restart Delivery" button resets startTime to null, cancels the in-flight animation frame, and re-triggers the full sequence from 0%, making the demo easy to replay. Because every visual is driven by one shared progress variable, the vehicle position, ETA, status text, milestone highlighting, and progress bar can never fall out of sync with each other.