Scroll Progress
Barre fixe qui suit la progression de lecture le long de la page. Installez Scroll Progress depuis le registre VLLNT UI avec la CLI shadcn.
Barre fixe qui suit la progression de lecture le long de la page. Fait partie de la famille data-display dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Scroll Progress a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/scroll-progress.jsonSource
"use client";
import * as React from "react";
import { cn } from "../../lib/utils";
/** Props for {@link ScrollProgress}. */
export type ScrollProgressProps = React.ComponentPropsWithoutRef<"div">;
function computeProgress(): number {
const element = document.documentElement;
const scrollable = element.scrollHeight - element.clientHeight;
if (scrollable <= 0) {
return 0;
}
return (element.scrollTop / scrollable) * 100;
}
/**
* Fixed bar pinned to the top of the page that grows with scroll progress.
*
* Functional under `prefers-reduced-motion`: it updates instantly.
*
* @example
* ```tsx
* <ScrollProgress />
* ```
*/
export const ScrollProgress = ({
className,
ref,
style,
...props
}: ScrollProgressProps & { ref?: React.Ref<HTMLDivElement> }) => {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
const onScroll = (): void => {
setProgress(computeProgress());
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => {
window.removeEventListener("scroll", onScroll);
};
}, []);
return (
<div
aria-valuemax={100}
aria-valuemin={0}
aria-valuenow={Math.round(progress)}
className={cn(
"fixed inset-x-0 top-0 z-50 h-1 origin-left bg-primary",
className,
)}
ref={ref}
role="progressbar"
style={{ width: `${progress}%`, ...style }}
{...props}
/>
);
};
ScrollProgress.displayName = "ScrollProgress";
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.