Доставка еды

Трекер заказа: статусы проигрываются, курьер едет по маршруту

Демонстрация трекера доставки: слева четыре статуса — принят, готовим, курьер выехал, у двери — с вертикальной линией, которая заполняется, и временем у каждого; справа карточка-«телефон» с картой, пунктирным маршрутом от кухни до дома и курьером, который едет по кривой через CSS offset-path. Шаги проигрываются таймерами по кнопке «показать, как это выглядит», в конце всплывает сообщение от курьера. Слушает vibeui-cart:checkout и стартует сам.

Что можно поменять

  • eyebrow, title, lede, playLabel, replayLabel, courierName
  • steps: title, text, time, after (мс), progress (0–100)
  • цвет курьера и маршрута — через accent

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/delivery-004?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Для разработчика

Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.

Теги

  • delivery
  • tracker
  • order-status
  • timeline
  • courier
  • map
  • offset-path
  • motion-path
  • animation
  • demo
  • event
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…