Scroll Progress
Полоса прогресса чтения вверху страницы на чистом CSS scroll-driven — ноль JS.
Пропсы
Разобрано из кода записи: обязательные — без «?», у остальных показано значение по умолчанию.
| Проп | Тип | По умолчанию | Что это |
|---|---|---|---|
| children | ReactNode | — |
Установка
npx shadcn@latest add https://motiva.pages.dev/r/scroll-progress.jsonЧто нужно в проекте до установки
Файл
components.jsonв корнеИз него CLI узнаёт, куда класть файлы. Алиасы — в такой форме:
"aliases": { "components": "@/components", "lib": "@/lib" }Нет файла — установка не начнётся вовсе.
Алиас
@объявлен дваждыВ корневом
tsconfig.jsonи в конфиге сборщика. В Vite корневой tsconfig часто содержит толькоreferences— этого мало."paths": { "@/*": ["./src/*"] } // tsconfig.json resolve.alias = { "@": "/src" } // vite.config.tsБез
pathsCLI молча создаёт папку с именем@.Токены подключены один раз на приложение
Они приезжают вместе с записью — достаточно импортировать их в точке входа:
import "@/styles/motiva-tokens.css";Без них блок потеряет цвета, ритм и тему.
Своя типографика не спорит с блоком
Наследуемые свойства протекают внутрь:
text-align: centerна обёртке отцентрует содержимое секции. То же касаетсяfont-familyиline-height.Проект без TypeScript? всё равно нужен tsconfig
CLI грузит
tsconfig.jsonбезусловно, а при"tsx": falseидёт заjsconfig.jsonи падает так же. Минимум — файл сpathsи"tsx": trueвcomponents.json.Приехавший рядом
.tsxможно не трогать — вам нужен.vanilla.js.
Экспорт
Код
.spg-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 4px;
transform-origin: 0 50%;
transform: scaleX(0);
background: linear-gradient(90deg, oklch(0.62 0.19 280), oklch(0.72 0.15 220));
z-index: 50;
/* CSS scroll-driven animation (Chromium 115+; в неподдерживающих браузерах бар просто скрыт) */
animation: spg-grow linear both;
animation-timeline: scroll(root block);
}
@keyframes spg-grow {
to {
transform: scaleX(1);
}
}
import { type ReactNode } from "react";
import "./scroll-progress.css";
/** Полоса прогресса скролла на CSS scroll-driven анимации (без JS). Обёртка вокруг прокручиваемого контента. */
export function ScrollProgress({ children }: { children: ReactNode }) {
return (
<>
<div className="spg-bar" aria-hidden="true" />
{children}
</>
);
}
