Компоненты/Прогресс прокрутки: полоса

Прогресс прокрутки: полоса

29 сентября 2026

Вертикальная полоса сбоку заполняется по мере прокрутки, а метка с процентом едет вслед за положением страницы.

Установка

npm install clsx motion tailwind-merge
pnpm add clsx motion tailwind-merge
yarn add clsx motion tailwind-merge
bun add clsx motion tailwind-merge

Файлы

scroll-progress-bar.tsx
НазадЗатухание при прокруткеДалееПрогресс прокрутки: кольцо

Тонкая вертикальная полоса закреплена сбоку от текста и заполняется сверху вниз по мере прокрутки. Рядом с ней едет короткая засечка с числом — текущей долей пройденного в процентах.

Индикатор движется синхронно со скроллом без задержек и не отвлекает от чтения, поэтому его удобно держать на экране всё время.

Вручную

Скопируйте эти файлы в components/scroll-progress-bar/:

Общие помощники положите в lib/ проекта:

Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.

Использование

import { ScrollProgressBar } from "@/components/scroll-progress-bar/scroll-progress-bar";

export function Article() {
return (
  <ScrollProgressBar color="#66d9e8" height={200}>
    <article className="mx-auto max-w-xl">Длинный текст статьи</article>
  </ScrollProgressBar>
);
}

Пропсы

Пропс
Описание
children?

Содержимое рядом с полосой

Тип ReactNode

container?

Свой прокручиваемый контейнер вместо окна

Тип RefObject<HTMLElement | null>

color?

Цвет заполнения и метки, по умолчанию цвет бренда

Тип string

height?

Высота полосы в пикселях

Тип number·По умолчанию 240

thickness?

Толщина полосы в пикселях

Тип number·По умолчанию 6

showLabel?

Показывать число процентов

Тип boolean·По умолчанию true

className?

Классы корневого блока

Тип string