File size: 2,954 Bytes
c2efbe6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import "./LoadingScreen.css"
const LoadingScreen = () => {
const [particles, setParticles] = useState([])
useEffect(() => {
const newParticles = Array.from({ length: 10 }, (_, i) => ({
id: i,
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight,
duration: 3 + Math.random() * 2,
delay: Math.random() * 2
}))
setParticles(newParticles)
}, [])
return (
<motion.div
className="loading-screen"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
>
<div className="loading-content">
<motion.div
className="loading-logo"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{
duration: 0.8,
ease: "easeOut",
delay: 0.2,
}}
>
<div className="logo-rings">
<div className="ring ring-1"></div>
<div className="ring ring-2"></div>
<div className="ring ring-3"></div>
</div>
<motion.h1
className="loading-title gradient-text"
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.8, duration: 0.6 }}
>
MKCart
</motion.h1>
</motion.div>
<motion.div
className="loading-bar-container"
initial={{ width: 0 }}
animate={{ width: "300px" }}
transition={{ delay: 1, duration: 0.8 }}
>
<div className="loading-bar">
<motion.div
className="loading-progress"
initial={{ width: "0%" }}
animate={{ width: "100%" }}
transition={{
delay: 1.2,
duration: 1.5,
ease: "easeInOut",
}}
/>
</div>
</motion.div>
<motion.p
className="loading-text"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 1.5, duration: 0.5 }}
>
Welcome to MKCart💖
</motion.p>
</div>
<div className="loading-particles">
{particles.map((particle) => (
<motion.div
key={particle.id}
className="particle"
initial={{
x: particle.x,
y: particle.y,
opacity: 0,
}}
animate={{
opacity: [0, 1, 0],
}}
transition={{
duration: particle.duration,
repeat: Number.POSITIVE_INFINITY,
delay: particle.delay,
}}
/>
))}
</div>
</motion.div>
)
}
export default LoadingScreen |