This component no longer exists. It was in Svelte Animations’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-05 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
Scroll Progress
svelte-animations/scroll-progressRemovedBlock
A fixed progress bar component that indicates page scroll progress with a gradient color effect.
Install it
npx shadcn@latest add https://sv-animations.vercel.app/r/scroll-progress.jsonSource
1<script lang="ts">2 import { motion, useScroll } from "motion-sv";3 import { cn } from "$UTILS$";45 interface ScrollProgressProps {6 class?: string;7 }89 let { class: className }: ScrollProgressProps = $props();1011 let scroll = $derived(useScroll());12</script>1314<motion.div15 class={cn(16 "fixed inset-x-0 top-0 z-50 h-1 origin-top-left bg-linear-to-r from-[#A97CF8] via-[#F38CB8] to-[#FDCC92]",17 className18 )}19 style={{20 scaleX: scroll.scrollYProgress,21 }}22/>
What it pulls in
npm packages
