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 './ScrollProgress.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:

ScrollProgress.vue

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

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

const props = defineProps<Props>();
const { scrollYProgress } = useScroll();
</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