12 min Llegada estimada 21:42
Tu pedido está en camino
- Preparado
- En camino
- Entregado
HTML + CSSCartes
Suivi de commande en route
Une mini-carte où l'itinéraire se dessine et un scooter le parcourt, avec heure d'arrivée et étapes.
Réglages
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>Arrivée estimée 21 h 42</span></p><h3>Ta commande est en route</h3><ol><li class="ok">Prête</li><li class="nw">En route</li><li>Livrée</li></ol></div></article>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Cartes
Voir tout : CartesOù l’utiliser
Les applis de livraison de repas, de courses et de colis rassurent d'un coup d'œil sur l'itinéraire. Cette carte dessine un petit plan de rues, trace le chemin du magasin à la maison pendant qu'un scooter le parcourt, affiche les minutes restantes avec l'heure d'arrivée estimée et liste trois étapes, l'étape en cours scintille.
L'itinéraire et le scooter utilisent une animation SVG sur le même tracé, ils restent alignés à toutes les tailles. Remplace le tracé par ton itinéraire.