Scroll Progress

Animated Scroll Progress for your pages

Note: The scroll progress is shown below the navbar of the page.

Edit on GitHub

Copy code

Show code

<script setup lang="ts">
import ScrollProgress from "./scroll-progress.vue";
</script>

<template>
  <div class="z-10 rounded-lg p-4">
    <ScrollProgress />
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ut repellat voluptates qui
      officia recusandae similique accusamus quis, mollitia temporibus incidunt doloribus totam
      impedit dolorem optio fugiat eveniet consectetur repudiandae ducimus. Fugiat numquam ipsam
      nobis dolores. Qui ullam excepturi, odit magni voluptates est vitae autem accusantium,
      consequatur rem nihil eum. Ad accusamus possimus exercitationem nostrum corrupti error quam
      blanditiis. Soluta accusantium ad necessitatibus ea repellat recusandae? Minima, quos alias
      earum dolore animi fugiat quam ipsum nam. Quisquam cumque reiciendis enim tenetur quia
      voluptates sunt officia optio unde est, mollitia numquam qui molestias ducimus nihil ex nulla
      deserunt expedita placeat a? Voluptatum amet quod suscipit iste placeat earum corporis aut
      quos sint! Magni numquam cumque saepe quos nobis, libero facere molestias exercitationem
      perspiciatis illo nihil praesentium vel harum enim, impedit consequatur minus dolor! Deleniti
      sapiente eveniet illum explicabo porro consequuntur doloribus ipsam odit quibusdam, ea
      quisquam velit iusto itaque consequatur quod eos earum molestias dignissimos architecto. Saepe
      excepturi quisquam ipsam perspiciatis rem ut, sequi voluptatibus nihil eius tempora eum
      voluptatem eligendi omnis veritatis accusantium iure vel at commodi facere. Veniam accusamus
      reiciendis neque maiores eaque aperiam, modi magni inventore adipisci beatae provident
      reprehenderit qui facilis illum facere blanditiis veritatis similique quasi alias a suscipit
      eligendi! Eveniet quaerat dicta natus, adipisci iusto sed accusamus mollitia impedit voluptas
      est ex repellendus iste laboriosam incidunt reiciendis numquam quidem facilis ipsam! Labore
      vel maxime ullam, quis sequi ipsa earum tempore quaerat facilis quae voluptates quia harum
      quam porro aliquam odit dicta officiis tempora. Quo, iusto, commodi molestias corporis
      praesentium accusantium esse voluptate suscipit alias itaque rerum cupiditate quam ipsam eos,
      reiciendis reprehenderit sapiente voluptas cum vero soluta. Esse, rerum quasi maiores dicta
      maxime itaque exercitationem harum repudiandae sequi, magni quam odit possimus ipsa beatae
      soluta quisquam recusandae laudantium porro, excepturi aperiam delectus veritatis commodi.
      Neque cupiditate dicta natus optio expedita amet ab saepe qui, at earum, fuga voluptates
      reiciendis officiis nemo, beatae officia quia doloribus. Dolores earum obcaecati quasi
      inventore sed dolor ullam eveniet voluptate sapiente modi eaque ipsum, facilis iure suscipit!
      Similique repellat ab, eligendi sed corrupti eos delectus animi aspernatur ipsum provident
      sunt! Beatae quo quod inventore ut qui sequi, reiciendis maiores pariatur laboriosam quas
      voluptate necessitatibus dolore nisi. Recusandae facere laudantium aliquam consequuntur,
      molestias eligendi ipsa maxime officiis delectus alias necessitatibus ducimus beatae est nulla
      voluptate, blanditiis itaque tenetur animi natus quas, et iusto? Maiores iste, accusantium
      ipsa dignissimos natus sapiente consectetur facilis aperiam quam, odit velit vel suscipit nam!
      Reprehenderit sint exercitationem ullam dolorem consequatur necessitatibus doloremque quia
      aliquam, assumenda vero quisquam! Numquam iste obcaecati nihil minima repellendus iusto
      temporibus sequi ab corrupti officiis eius dignissimos reprehenderit placeat modi facere
      nostrum autem ipsum, illum dolore. Hic iste expedita earum quam, qui eius, dolores quis
      adipisci, asperiores quidem alias ullam? Ea alias, modi totam quibusdam qui tenetur eum dolor
      odio a molestias! Nesciunt vero sed tenetur aliquam maxime error officiis saepe possimus
      rerum! Dolor magni dolorem beatae ullam architecto animi, tempore, totam, saepe accusantium
      maiores vel quibusdam nostrum aperiam iure nisi corporis!
    </p>
  </div>
</template>

Installation

Install the following dependencies

pnpm add motion-v

Copy and paste the following code into your project:

scroll-progress.vue

<script setup lang="ts">
import type { HTMLAttributes } from "vue";
import { motion, type MotionProps, useMotionValue, useScroll } from "motion-v";
import { onMounted, onUnmounted } from "vue";
import { cn } from "@/lib/utils";
interface ScrollProgressProps extends Omit<HTMLAttributes, keyof MotionProps> {}

interface Props extends /* @vue-ignore */ ScrollProgressProps {
  className?: string;
}

const props = defineProps<Props>();
const scrollYProgress = useMotionValue(0);

onMounted(() => {
  const { scrollYProgress: progress } = useScroll();
  const unsubscribe = progress.on("change", (v: number) => scrollYProgress.set(v));
  onUnmounted(() => unsubscribe());
});
</script>

<template>
  <motion.div
    :class="
      cn(
        'fixed inset-x-0 top-0 z-50 h-[2px] origin-left bg-gradient-to-r from-[#A97CF8] via-[#F38CB8] to-[#FDCC92]',
        props.className,
      )
    "
    :style="{
      scaleX: scrollYProgress,
    }"
  />
</template>

Props

Prop	Type	Default	Description
className	string	-	The class name to be applied to the component