export function BarEqualizerLoader() {
  const bars = [0, 1, 2, 3, 4];

  return (
    <div className="grid min-h-[200px] place-items-center bg-[#FAFAF8] p-16">
      <div className="text-center">
        <div className="flex h-12 items-end justify-center gap-1.5">
          {bars.map((i) => (
            <span
              key={i}
              className="w-2.5 bg-[#111111]"
              style={{
                animation: `eq 0.9s ease-in-out ${i * 0.12}s infinite`,
                height: "100%",
                transformOrigin: "bottom",
              }}
            />
          ))}
        </div>
        <div
          className="mt-5 text-[12px] font-bold uppercase tracking-[0.16em] text-[#111111]"
          style={{ fontFamily: "Arial, Helvetica, sans-serif" }}
        >
          Processing…
        </div>
      </div>

      <style>{`
        @keyframes eq {
          0%, 100% { transform: scaleY(0.3); }
          50%      { transform: scaleY(1); }
        }
      `}</style>
    </div>
  );
}
Bar Equalizer Loader
