Open experiment
Orbit shipping tracker
A semantic order-progress component that maps four logistics stages onto an orbital route. Completed, current, and upcoming text accompany the visual state, with current shipment detail available through a native disclosure button.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<article class="cmp-orbit-shipping">
<header>
<div>
<span>Order #CL-2084</span>
<h2>Arriving tomorrow</h2>
</div>
<b>In transit</b>
</header>
<div class="cmp-orbit-shipping__route" aria-hidden="true"><i></i><span>▰</span></div>
<ol>
<li data-state="complete"><b>Ordered</b><small>Complete · Aug 01</small></li>
<li data-state="complete"><b>Packed</b><small>Complete · Aug 02</small></li>
<li data-state="current" aria-current="step">
<b>In transit</b><small>Current · 14:32</small>
</li>
<li data-state="future"><b>Delivered</b><small>Expected · Aug 03</small></li>
</ol>
<button type="button" aria-expanded="false" aria-controls="cmp-orbit-shipping-detail">
View live detail <span aria-hidden="true">⌄</span>
</button>
<div id="cmp-orbit-shipping-detail" class="cmp-orbit-shipping__detail" hidden>
<strong>Alexandria distribution route</strong>
<p>Courier scanned your package 18 minutes ago. Next checkpoint is Cairo Central.</p>
</div>
</article>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- An ordered list and visible state text preserve the fulfillment sequence.
- The current stage uses aria-current in addition to color.
- Shipment detail uses a native button with synchronized expanded state.
License: MIT License for open-source use, modification, and distribution.