12 min Llegada estimada 21:42
Tu pedido está en camino
- Preparado
- En camino
- Entregado
HTML + CSSCards
Order on its way tracker card
A small map with the route drawing itself and a scooter moving along it, plus ETA and order steps.
Settings
16px
1x
Code
<article class="uv-kdt"><div class="mp" aria-hidden="true"><svg viewBox="0 0 200 110"><path class="st" d="M0 30h200M0 78h200M46 0v110M120 0v110M168 0v110"/><path class="rt0" d="M22 92 C22 78 46 78 46 64 S70 30 120 30 S168 46 178 18"/><path id="uv-kdt-rt" class="rt" pathLength="1" d="M22 92 C22 78 46 78 46 64 S70 30 120 30 S168 46 178 18"/><animate href="#uv-kdt-rt" attributeName="stroke-dashoffset" values="1;0;0" keyTimes="0;.7;1" dur="6s" repeatCount="indefinite"/><circle class="a" cx="22" cy="92" r="5"/><circle class="b" cx="178" cy="18" r="6"/><g class="mo"><circle r="10"/><g transform="translate(-6 -6) scale(.5)" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="17" r="3"/><circle cx="18" cy="17" r="3"/><path d="M6 17h6l3-6h3M9 11h4M15 11l-2-4h-2"/></g><animateMotion dur="6s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.7;1" calcMode="linear" path="M22 92 C22 78 46 78 46 64 S70 30 120 30 S168 46 178 18"/></g></svg></div><div class="tx"><p class="et"><b>12 min</b> <span>Estimated arrival 9:42 pm</span></p><h3>Your order is on its way</h3><ol><li class="ok">Ready</li><li class="nw">On the way</li><li>Delivered</li></ol></div></article>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
See all CardsWhere to use it
Food delivery, groceries and courier apps keep people calm with one glance at the route. This card draws a tiny street map, traces the path from shop to home while a scooter marker travels along it, shows the minutes left with an estimated arrival time, and lists three steps with the current one shimmering.
The route and the scooter use SVG animation tied to the same path, so they stay aligned at any size, and the speed control adjusts both. Replace the path data with your own route and update the times from your API.