Animated Scroll Progress Components

Dev Design Library indexes 14 Animated scroll progress components from 10 open-source UI libraries, with the most coming from Velora UI, Aceternity UI, UI Lab, Nexvyn UI and Rare UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the scroll progress components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Scroll progress components belong to the Feedback group.

• Scroll ProgressMagic UI · ReactAnimated Scroll Progress for your pages
• Scroll ProgressbeUI · ReactReading-progress indicator — fixed bar or circular ring — driven by scroll position via useSmoothScroll, with spring…
• Scroll ProgressRare UI · ReactA scroll progress pill that tracks reading position and expands into a squircle menu of sections you can jump to.
• Reading ProgressUser Interface Wiki · React
• Scroll ProgressAnimations (Svelte) · SvelteA fixed progress bar component that indicates page scroll progress with a gradient color effect.
• Scroll IndicatorNexvyn UI · ReactA vertical scroll progress indicator with tick marks, section labels, and a floating position readout.
• Reading ProgressUI Lab · ReactA progress bar fills as you read while the time left counts down.
• Reading trailCojeev UI · ReactKeep your place with a connected spine, an expandable bookmark or a descriptive chapter overview—all following actual…
• Scroll ProgressVelora UI · ReactGradient page-progress bar pinned to the top.
• TimelineAceternity UI · React
• Scroll SpineUI Lab · ReactMaps the article as a spine of bands, each as long as its section, filling in as you read.
• TimelineVelora UI · ReactVertical timeline with sticky labels and a gradient beam that fills as you scroll.
• Tracing BeamAceternity UI · React
• Tracing BeamVelora UI · ReactGradient line that draws itself down long-form content.

Libraries with Animated scroll progress components

• Velora UI
• Aceternity UI
• UI Lab
• Nexvyn UI
• Rare UI

Related categories

• Scroll Progress Components
• React Scroll Progress Components
• Tailwind CSS Scroll Progress Components
• Animated Feedback Components
• Animated Spinner Components
• Animated Progress Components
• Animated Skeleton Components
• Animated Progress Bar Components
• Animated Status Indicator Components
• Animated Typing Indicator Components
• Animated Empty State Components
• Animated Badge Components
• Animated Chip Components
• Animated Notification Components
• Animated Alert Components
• Animated Progress Circle Components
• Animated Banner Components
• Animated Loading Screen Components
• Animated Error State Components