- Preparado
- En reparto
- Entregado
Toast de pedido en reparto
Una furgoneta avanza por la ruta entre preparado, en reparto y entregado mientras bajan los minutos de llegada.
Ajustes
Código
<div class="uvq09-dlv"><button type="button" class="fire">Mostrar de nuevo</button><div class="tt" role="status"><div class="hd"><span class="tx"><b>Tu pedido está en camino</b><small>Llega hacia las 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">Preparado</li><li class="on">En reparto</li><li>Entregado</li></ol></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toasts
Ver todos: ToastsDónde usarlo
Los avisos de reparto funcionan mejor cuando se ve el avance de un vistazo. Aquí una pequeña furgoneta rueda por una carretera discontinua, la ruta se rellena detrás, se enciende la parada central y los minutos de llegada bajan en una etiqueta. Todo son transiciones CSS y un contador mínimo, y encaja en comida a domicilio, seguimiento de compras y mensajería.
El color principal pinta la furgoneta y el tramo recorrido; el secundario tiñe la ventanilla. Lleva la furgoneta a otra parada cambiando el valor left y renombra los tres pasos según los estados de tu pedido.