Загрузка
Полоса перехода страницы
Тонкая полоса вверху вьюпорта для смены страницы: рывки и притормаживание перед концом говорят «почти готово» без выдуманного процента, а pointer-events:none не крадёт клики с контента под собой.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- active — монтируйте true на старте перехода и false по его завершении из состояния своего роутера
- label — невидимая подпись для скринридера
- height — толщину полосы
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/spinner-013?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<Spinner013 active={isNavigating} />Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Активна
active· по умолчанию: включено- Подпись для скринридера
label· по умолчанию: Переход на новую страницу- Толщина, px
height· по умолчанию: 3- Акцент
accent· по умолчанию: цвет темы- Дорожка
background· по умолчанию: цвет темы
Ещё в разделе «Загрузка»
Частые вопросы
- Как установить компонент «Полоса перехода страницы» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Полоса перехода страницы»?
- Никаких npm-пакетов, кроме React и Tailwind CSS.
- Что можно поменять в компоненте «Полоса перехода страницы»?
- Можно менять: active — монтируйте true на старте перехода и false по его завершении из состояния своего роутера; label — невидимая подпись для скринридера; height — толщину полосы. Сохранить как есть: локальную палитру --vibeui-spinner-013-* и не подменять её токенами вашей темы; position:fixed у верхнего края вьюпорта и максимальный z-index — полоса обязана быть поверх всего; pointer-events:none — полоса не должна перехватывать клики по контенту под собой.
- Компонент «Полоса перехода страницы» бесплатный?
- Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/spinner-013.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --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
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…