- Preparado
- En reparto
- Entregado
Delivery route toast
A van drives along the route between prepared, out for delivery and delivered while the arrival minutes tick down.
Settings
Code
<div class="uvq09-dlv"><button type="button" class="fire">Show again</button><div class="tt" role="status"><div class="hd"><span class="tx"><b>Your order is on its way</b><small>Arrives around 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">Ready</li><li class="on">Out for delivery</li><li>Delivered</li></ol></div></div>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 Toasts
See all ToastsWhere to use it
Delivery updates work best when people can see progress at a glance. Here a small van rolls along a dashed road, the track fills behind it, the middle stop lights up and the minutes to arrival count down in a badge. Everything is CSS transitions plus a tiny counter, and it fits food delivery, ecommerce tracking and courier apps.
The main color paints the van and the filled route; the second tints the window. Move the van to another stop by changing the left value, and rename the three steps to match your own order states.