Scroll Progress

Полоса прогресса чтения вверху страницы на чистом CSS scroll-driven — ноль JS.

cssscrollbasic~1 КБreduced-motion ✓

↕ демо длиннее кадра — прокрутите его

Пропсы

Разобрано из кода записи: обязательные — без «?», у остальных показано значение по умолчанию.

Проп	Тип	По умолчанию	Что это
children	ReactNode	—

Установка

npx shadcn@latest add https://motiva.pages.dev/r/scroll-progress.json

Что нужно в проекте до установки

components.json в корне — с алиасами в форме"components": "@/components". Нет файла — CLI не поймёт, куда класть.
Алиас @ объявлен дважды: "paths": {"@/*": ["./src/*"]} в корневом tsconfig.json (в Vite он часто содержит только references — тогда CLI создаёт папку@) и resolve.alias в конфиге сборщика.
Токены подключены один раз на приложение:import "@/styles/motiva-tokens.css" — они приезжают вместе с записью. Без них секция потеряет цвета, ритм и тему.
Своя типографика не должна спорить: если у вас на обёрткеtext-align: center, он протечёт внутрь блоков.
Проект без TypeScript? Всё равно нужен минимальныйtsconfig.json с pathsи "tsx": true в components.json: CLI грузит tsconfig безусловно, а с "tsx": false идёт за jsconfig.json и падает так же. Приехавший рядом.tsx можно не трогать — вам нужен.vanilla.js.

Экспорт

↓ Скачать .zip

Код

.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}
    </>
  );
}

Scroll Progress

Пропсы

Установка

Экспорт

Код

Похожие эффекты