Небольшой круглый индикатор в углу страницы заполняется по мере прокрутки и всегда отражает реальное положение, даже при очень быстром скролле. При наведении над ним появляется процент, цифры которого прокручиваются, как у механического счётчика.
Индикатор можно схватить и перетащить в любое место, чтобы он не закрывал текст, — он останется там, где его отпустили, в пределах заданной области.
Скопируйте эти файлы в components/scroll-progress-circle/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { useRef } from "react";
import { ScrollProgressCircle } from "@/components/scroll-progress-circle/scroll-progress-circle";
export function Article() {
const scrollRef = useRef<HTMLDivElement>(null);
return (
<div className="relative h-[600px]">
<div ref={scrollRef} className="h-full overflow-y-auto">
<div className="h-[3000px]" />
</div>
<ScrollProgressCircle container={scrollRef} className="absolute" color="#66d9e8" />
</div>
);
}container?Свой прокручиваемый контейнер вместо окна
Тип RefObject<HTMLElement | null>
dragConstraints?Область, в пределах которой можно перетаскивать
Тип RefObject<HTMLElement | null>
color?Цвет кольца, по умолчанию цвет текста
Тип string
strokeWidth?Толщина кольца
Тип number·По умолчанию 3
size?Размер плашки в пикселях
Тип number·По умолчанию 48
showPercent?Показывать процент при наведении
Тип boolean·По умолчанию true
className?Классы индикатора
Тип string