"use client"; import { useEffect, useState } from "react"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; const EASE = [0.16, 1, 0.3, 1] as const; const ROW_HEIGHT = 46; export type MultiStepLoaderProps = { /** Ordered status messages. The last one is treated as the finished state. */ steps?: string[]; /** Milliseconds each step stays active before completing. */ durationPerStep?: number; /** Restart from the top after the final step. */ loop?: boolean; /** Label shown in the header. */ title?: string; className?: string; }; const DEFAULT_STEPS = [ "Provisioning workspace", "Installing dependencies", "Warming edge cache", "Running migrations", "Ready", ]; function StepIcon({ state }: { state: "pending" | "active" | "done" }) { if (state === "done") { return ( ); } if (state === "active") { return ( ); } return ( ); } export function MultiStepLoader({ steps = DEFAULT_STEPS, durationPerStep = 1050, loop = true, title = "Deploying to production", className, }: MultiStepLoaderProps) { const total = steps.length; const [current, setCurrent] = useState(0); useEffect(() => { if (total === 0) return; const finished = current >= total; if (finished && !loop) return; const delay = finished ? 1500 : durationPerStep; const timer = setTimeout(() => { setCurrent((c) => (c >= total ? 0 : c + 1)); }, delay); return () => clearTimeout(timer); }, [current, total, durationPerStep, loop]); const complete = current >= total; const percent = total === 0 ? 0 : Math.round((Math.min(current, total) / total) * 100); const shownCount = Math.min(current, total); return (

{/* ambient top glow */}

{/* header */}

{complete ? "Deployment complete" : title}

{shownCount}/{total}

{/* steps */}

{/* sliding active highlight */} {steps.map((label, i) => { const state: "pending" | "active" | "done" = i < current ? "done" : i === current ? "active" : "pending"; return ( {label} {state === "active" && ( working )} ); })}

{/* progress bar */}

); } export default function Demo() { return (

); }

Multi Step Loader