"use client" import { motion } from 'framer-motion'; export default function GoogleLoaderDemo() { const colors = ['bg-blue-500', 'bg-red-500', 'bg-yellow-500', 'bg-green-500']; return ( <motion.div className="flex space-x-1 py-10" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }} > {colors.map((bgColor, index) => ( <motion.div key={bgColor} className={`w-3 h-3 ${bgColor} rounded-full transition-all duration-300 ease-linear`} animate={{ y: ['0%', '-100%', '0%'], }} transition={{ duration: 0.6, repeat: Infinity, repeatType: 'loop', ease: 'easeInOut', delay: index * 0.1, }} /> ))} </motion.div> ); };

Google

Pulse Dot

Spinning Circle

Progress Bar

Particle Explosion

Liquid Wave

Installation