Components
Loading preview...
he Preloader React component creates an animated loading screen using Framer Motion and React hooks. It cycles through greeting words in various languages ("Hello", "Bonjour", etc.) with a fade-in effect and a small animated dot. A morphing SVG path animates at the end, sliding up to reveal content. The component is responsive, adjusting to window size changes, and supports an optional onComplete callback triggered after the exit animation. It features a full-screen black background with centered, responsive text.
npx shadcn@latest add https://21st.dev/r/info-mdshakeeb/preloader"use client"
import { motion } from "framer-motion"
import { useState, useCallback } from "react"
import Preloader from "@/components/ui/preloader"
const DemoOne = () => {
const [showPreloader, setShowPreloader] = useState(true)
const handleComplete = useCallback(() => {
setShowPreloader(false)
}, [])
const handleReplay = useCallback(() => {
setShowPreloader(true)
}, [])
return (
<>
{showPreloader && <Preloader onComplete={handleComplete} />}
<main className="min-h-screen bg-background flex flex-col items-center justify-center p-4">
<motion.div
className="text-center space-y-8 max-w-3xl"
initial="hidden"
animate="visible"
>
<h1 className="text-4xl md:text-6xl font-bold tracking-tight text-foreground">Welcome</h1>
<p className="text-xl text-muted-foreground">
Your content has loaded successfully. The preloader animation has completed.
</p>
<button
onClick={handleReplay}
className="px-6 py-3 mt-6 text-base font-medium text-white bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg shadow-md hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95"
>
Replay Preloader
</button>
</motion.div>
</main>
</>
)
}
export { DemoOne }