amicro
uiapple-equalizersource: ok · hit
Apple Equalizer
Apple Equalizer loading animation.
npx shadcn add "https://amicro.vercel.app/r/apple-equalizer.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · mediumanimationframer-motion
Files1 · source cached 10/8/2026, 5:56:16 PM
registry/ui/loading/apple-equalizer.tsx
import React from 'react';
import { motion } from 'framer-motion';
export const AppleEqualizer = () => (
<div className="flex space-x-1 h-8 items-end">
{[0,1,2,3].map(i => (
<motion.div
key={i}
className="w-1.5 bg-zinc-800 dark:bg-white rounded-t-sm"
animate={{ height: ['20%', '100%', '20%'] }}
transition={{ duration: 0.8, repeat: Infinity, delay: Math.random() * 0.5, ease: "circInOut" }}
/>
))}
</div>
);