Индикатор ожидания
Полоса перехода страницы
Тонкая полоса вверху вьюпорта для смены страницы: рывки и притормаживание перед концом говорят «почти готово» без выдуманного процента, а pointer-events:none не крадёт клики с контента под собой.
Что можно поменять
- active — монтируйте true на старте перехода и false по его завершении из состояния своего роутера
- label — невидимая подпись для скринридера
- height — толщину полосы
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/spinner-013?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-spinner-013-*. Серверный: хуков нет, active управляет рендером снаружи. Полоса стоит position:fixed у верхнего края вьюпорта с максимальным z-index и pointer-events:none, поэтому не перекрывает клики по содержимому под собой. Видимого текста у полосы нет — role="status" с невидимой aria-live-подписью announcит переход ассистивным технологиям в момент появления блока в DOM. Заполнение — не процент, а декоративная имитация разгона с замедлением перед концом: для перехода между страницами точная доля никому не известна. При prefers-reduced-motion бег сменяется дыханием прозрачности на статичной ширине. Тема берётся из color-scheme окружения через light-dark(). Дорожка прозрачна по умолчанию — проп background добавляет ей заметный цвет. Витринный проп inline переводит полосу из fixed в поток своего контейнера: он нужен карточке каталога и скриншотам, в приложении полоса остаётся поверх страницы.
Теги
- spinner
- loading
- route
- progress
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…