"use client";

import * as React from "react";
import {
  motion,
  useInView,
  useMotionValueEvent,
  useScroll,
  useTransform,
} from "framer-motion";

import { cn } from "@/lib/utils";

type ScrollProgressVariant = "bar" | "circle";

interface ScrollProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
  label?: string;
  variant?: ScrollProgressVariant;
  size?: number;
  thickness?: number;
}

function ScrollProgressBar({
  label = "Scroll progress",
  variant = "bar",
  size = 140,
  thickness = 10,
  className,
  ...props
}: ScrollProgressBarProps) {
  const containerRef = React.useRef<HTMLDivElement | null>(null);
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"],
  });
  const progress = useTransform(scrollYProgress, [0, 1], [0, 1]);
  const isInView = useInView(containerRef, { amount: 0.35 });
  const [value, setValue] = React.useState(0);

  useMotionValueEvent(scrollYProgress, "change", (latest) => {
    setValue(Math.round(latest * 100));
  });

  const radius = (size - thickness) / 2;
  const circumference = 2 * Math.PI * radius;
  const strokeDashoffset = useTransform(progress, [0, 1], [
    circumference,
    0,
  ]);

  return (
    <div
      ref={containerRef}
      className={cn(
        "w-full rounded-2xl border border-border bg-card p-4",
        className
      )}
      {...props}
    >
      <motion.div
        className="flex items-center justify-between text-sm text-muted-foreground"
        animate={{ opacity: isInView ? 1 : 0.6 }}
        transition={{ duration: 0.3 }}
      >
        <span>{label}</span>
        <span className="text-foreground">{value}%</span>
      </motion.div>

      {variant === "bar" ? (
        <div className="mt-4 h-2 w-full overflow-hidden rounded-full bg-card/60">
          <motion.div
            className="h-full origin-left bg-current text-primary"
            style={{ scaleX: progress }}
          />
        </div>
      ) : (
        <div className="mt-4 flex items-center justify-center">
          <div className="relative" style={{ width: size, height: size }}>
            <svg
              width={size}
              height={size}
              viewBox={`0 0 ${size} ${size}`}
              className="-rotate-90"
            >
              <circle
                cx={size / 2}
                cy={size / 2}
                r={radius}
                strokeWidth={thickness}
                className="text-muted-foreground/30"
                stroke="currentColor"
                fill="none"
              />
              <motion.circle
                cx={size / 2}
                cy={size / 2}
                r={radius}
                strokeWidth={thickness}
                className="text-primary"
                stroke="currentColor"
                fill="none"
                strokeDasharray={circumference}
                style={{ strokeDashoffset }}
                strokeLinecap="round"
              />
            </svg>
            <div className="absolute inset-0 flex items-center justify-center">
              <span className="text-lg font-semibold text-foreground">
                {value}%
              </span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export { ScrollProgressBar };
export type { ScrollProgressBarProps, ScrollProgressVariant };
Scroll Progress Bar

Dependencies

Files

Installation
