12 min Llegada estimada 21:42
Tu pedido está en camino
- Preparado
- En camino
- Entregado
HTML + CSSKarten
Bestellung-unterwegs-Karte
Eine Minikarte, auf der sich die Route zeichnet und ein Roller sie abfährt, mit Ankunftszeit und Schritten.
Einstellungen
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>Voraussichtliche Ankunft 21:42</span></p><h3>Deine Bestellung ist unterwegs</h3><ol><li class="ok">Fertig</li><li class="nw">Unterwegs</li><li>Zugestellt</li></ol></div></article>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Karten
Alle ansehen: KartenWofür du ihn nutzen kannst
Lieferdienste für Essen, Lebensmittel und Pakete beruhigen mit einem Blick auf die Route. Diese Karte zeichnet einen kleinen Stadtplan, zieht den Weg vom Laden nach Hause nach, während ein Roller-Symbol ihn abfährt, zeigt die restlichen Minuten mit voraussichtlicher Ankunft und listet drei Schritte, der aktuelle schimmert.
Route und Roller nutzen SVG-Animation auf demselben Pfad, sie bleiben also in jeder Größe deckungsgleich, und die Geschwindigkeit regelt beide. Ersetze den Pfad durch deine Route.