- Preparado
- En reparto
- Entregado
Toast für Lieferung unterwegs
Ein Lieferwagen fährt die Route zwischen vorbereitet, unterwegs und zugestellt entlang, während die Minuten bis zur Ankunft sinken.
Einstellungen
Code
<div class="uvq09-dlv"><button type="button" class="fire">Erneut zeigen</button><div class="tt" role="status"><div class="hd"><span class="tx"><b>Deine Bestellung ist unterwegs</b><small>Ankunft gegen 14:35</small></span><span class="eta" aria-hidden="true"><b>12</b><small>min</small></span></div><div class="rt" aria-hidden="true"><i class="tr"><i class="fi"></i></i><i class="dt d1"></i><i class="dt d2"></i><i class="dt d3"></i><span class="vn"><svg viewBox="0 0 32 20"><path class="bd" d="M2 3.5h16.5v11.5H2zM18.5 7.5h6l4.5 4.5v3H18.5z"/><path class="wn" d="M20.5 9h3.4l2.6 2.6h-6z"/><circle class="wh" cx="8" cy="15.5" r="2.6"/><circle class="wh" cx="24" cy="15.5" r="2.6"/></svg></span></div><ol class="lb"><li class="on">Fertig</li><li class="on">In Zustellung</li><li>Zugestellt</li></ol></div></div>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 Toasts
Alle ansehen: ToastsWofür du ihn nutzen kannst
Lieferhinweise wirken am besten, wenn man den Fortschritt auf einen Blick sieht. Hier rollt ein kleiner Lieferwagen über eine gestrichelte Straße, die Strecke füllt sich hinter ihm, der mittlere Halt leuchtet auf und die Minuten bis zur Ankunft zählen in einem Badge herunter. Alles läuft über CSS-Übergänge und einen winzigen Zähler, passend für Essenslieferung, Sendungsverfolgung und Kurierdienste.
Die Hauptfarbe färbt den Wagen und die gefahrene Strecke, die zweite das Fenster. Mit dem Wert left schickst du den Wagen zu einem anderen Halt, und die drei Schritte benennst du nach deinen eigenen Bestellstatus.