webdevpuneet.com

Related Snippets

144 in Dashboards category
1–6 of 60

Interact.js Draggable and Resizable Dashboard Panels with Snapping

Dragula Copy vs Move Lists with Spill Control

SortableJS Shared Groups: Clone from a Palette into a Page Builder

SortableJS Drag Handle with Pinned and Locked Rows

SortableJS Nested Sortable Tree with Keyboard Controls

SortableJS Multi-List Kanban with Persistence and WIP Limit

Package Tracking Route — Free Shipment Progress Map Widget

Package Tracking Route · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsCSS AnimationDashboard UI

Copy & paste

Source Code

<div class="pt-card">
  <div class="pt-head">
    <div>
      <h2>Package #TRK-88213</h2>
      <p>Estimated delivery: <strong>Today, 6:30 PM</strong></p>
    </div>
    <span class="pt-badge">In transit</span>
  </div>

  <div class="pt-route" id="ptRoute">
    <div class="pt-line"><div class="pt-line-fill" id="ptLineFill"></div></div>
    <div class="pt-node pt-node--done" data-pct="0">
      <span class="pt-dot"></span>
      <span class="pt-node-label">Origin<br /><small>Newark, NJ</small></span>
    </div>
    <div class="pt-node pt-node--done" data-pct="33">
      <span class="pt-dot"></span>
      <span class="pt-node-label">Hub<br /><small>Columbus, OH</small></span>
    </div>
    <div class="pt-node pt-node--current" data-pct="66">
      <span class="pt-dot pt-dot--pulse"></span>
      <span class="pt-node-label">Hub<br /><small>Denver, CO</small></span>
    </div>
    <div class="pt-node" data-pct="100">
      <span class="pt-dot"></span>
      <span class="pt-node-label">Destination<br /><small>Boise, ID</small></span>
    </div>
    <div class="pt-package" id="ptPackage" title="Package location">📦</div>
  </div>

  <ul class="pt-timeline">
    <li class="pt-done"><span class="pt-tl-dot"></span><div><strong>Order placed</strong><time>Mon, 9:02 AM</time></div></li>
    <li class="pt-done"><span class="pt-tl-dot"></span><div><strong>Shipped</strong><time>Mon, 4:47 PM</time></div></li>
    <li class="pt-done"><span class="pt-tl-dot"></span><div><strong>In transit</strong><time>Tue, 11:15 AM</time></div></li>
    <li class="pt-active"><span class="pt-tl-dot"></span><div><strong>Out for delivery</strong><time>Pending</time></div></li>
    <li><span class="pt-tl-dot"></span><div><strong>Delivered</strong><time>—</time></div></li>
  </ul>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Route as connected nodes
Origin, hubs, and destination on one line.
Live package marker
Positioned by a simple data-pct attribute.
Animated progress fill
The line fills up to the current stop.
Pulsing current indicator
A CSS keyframe draws the eye to "now."
Five-state timeline
Order placed through Delivered, with times.
No map dependency
No API key, no external tiles or scripts.
Smooth repositioning
A CSS transition animates marker moves.
Responsive layout
Flexbox nodes reflow on narrow screens.

About this UI Snippet

Package Tracking Route — A Shipment Map With a Status Timeline

Screenshot of the Package Tracking Route snippet rendered live

The package tracking route is the visual carriers and e-commerce order pages use to show a shipment's journey at a glance — origin, one or more transit hubs, and destination laid out on a horizontal line, with the package marked at its current position, backed by a chronological status list. This snippet builds it in plain HTML, CSS, and JavaScript.

Nodes on a line, not a real map

Rather than embedding a real map (which needs an API key and geodata), the route is four .pt-node elements spaced with justify-content: space-between over an absolutely positioned .pt-line. This keeps the widget dependency-free while still communicating "this is a journey with stops" clearly.

A fill that shows progress

.pt-line-fill is a second line, layered on top of the track, whose width is driven by the current node's data-pct attribute (a 0–100 position along the route). It's the same pattern as a progress bar, just applied along the route instead of a straight bar — everything before the current hub reads as "done."

The package marker floats above the line

The 📦 emoji is absolutely positioned and its left is set in JavaScript to match data-pct from the node marked .pt-node--current, so moving the package to a new stage is a one-line change (update the class and the script re-reads the new position on next run). A CSS transition on left animates the move.

A pulsing "current" dot

The current-hub dot uses a box-shadow keyframe animation that expands and fades — a common "live" indicator pattern — so the eye is drawn to where the package actually is without needing a live map.

Status timeline below

A vertical list mirrors the five standard shipment states — Order placed, Shipped, In transit, Out for delivery, Delivered — each with a timestamp. Completed steps get a filled dot and a connecting line in the brand blue; the active step gets a green glow; future steps stay dim, giving a clear "here's what's happened and what's next" read.

Customizing it

Add more transit hubs by inserting nodes with their own data-pct, wire the JS to update from a real tracking API response, or swap the emoji for an SVG truck/plane icon per leg. Pair it with a delivery ETA card or order tracking timeline.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe route, timeline, and header render.
  2. 2
    Mark the current nodeAdd the pt-node--current class to a stop.
  3. 3
    Set data-pctA 0–100 value positions the package on the line.
  4. 4
    Update the timelineToggle pt-done / pt-active as status changes.
  5. 5
    Wire to your APICall placePackage() after updating the DOM.

Real-world uses

Common Use Cases

Order confirmation pages
Show a shipment's route right after checkout, with origin, transit hubs and destination on one line and the package marked by a data-pct position.
Logistics dashboards
Pair with a status dashboard so operations teams see each shipment's stage beside overall system health.
Courier apps
Combine with a delivery ETA card so the route and the arrival estimate sit together, with a pulsing marker on the current stop.
Customer support tools
Let agents see a shipment's stage at a glance while helping a customer, using the status timeline with timestamps for the exact history.
Marketplace order history
Sit alongside an order tracking timeline in order history pages, with the progress line filling up to the current stop.
Related: Unit Converter
See the Unit Converter for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

No. It's a stylized horizontal route made of positioned nodes and a fill line, not a real map with tiles or coordinates. This keeps it dependency-free and fast — swap in a real map library if you need actual geography.

Remove the pt-node--current class from the old node and add it to the new one (with its own data-pct), then call placePackage() again — it reads the currently marked node and repositions the marker and the fill line.

Insert another .pt-node element between existing ones with a data-pct value between its neighbors, matching the flexbox spacing. The line and fill automatically span the full width regardless of node count.

Yes — after fetching a shipment status, toggle the pt-done/pt-active classes on the timeline items, move the pt-node--current class to the matching route node with the right data-pct, and call placePackage() to sync the visual position.

The animation is purely decorative and doesn't convey information on its own — the "In transit" badge and timeline text carry the actual status, so screen reader users get the same information without relying on the animation.