HomeAboutCodes

IntroductionCSS FlexboxCSS Grid Layout

AccordionAspect RatioBadgeBreadcrumbButtonCarouselCheckboxDate PickerDialogDrawerFormHover CardPaginationPopoverSheetSkeletonSonnerSwitchTableTooltip

Background FireworksBackground HexagonBackground HoleBackground StartElement SpringLoadingProgress ScrollText HighlightText RollingText ShimmeringText SplittingText Typing

Sortable

useClickOutsideuseCopyToClipboarduseDebounceuseFetchuseIsClientuseLocalStorageuseMediaQueryusePrevioususeToggleuseUnmount

Preview

Scroll to see the progress

Import

1import { ScrollProgress } from "@repo/ui/animate-ui/progress-scroll";

Usage

1<div className="relative h-40 overflow-y-auto">
2  <ScrollProgress
3    className="top-0 left-0 w-full z-10"
4    progressProps={{ className: "absolute" }}
5  >
6    <div className="h-[1000px]">
7      <p className="text-center mt-20">Scroll to see the progress</p>
8    </div>
9  </ScrollProgress>
10</div>;
LoadingText Highlight