Dot Matrix Loader

import { LoaderDotMatrix } from "@/components/ui/loader-dot-matrix";

export default function LoaderDotMatrixDemo() {
  return (
    <div className="flex min-h-64 flex-wrap items-center justify-center gap-16">
      <div className="flex flex-col items-center gap-4">
        <LoaderDotMatrix pattern="ripple" />
        <span className="text-xs text-muted-foreground">Ripple</span>
      </div>
      <div className="flex flex-col items-center gap-4">
        <LoaderDotMatrix pattern="wave" />
        <span className="text-xs text-muted-foreground">Wave</span>
      </div>
      <div className="flex flex-col items-center gap-4">
        <LoaderDotMatrix pattern="rain" />
        <span className="text-xs text-muted-foreground">Rain</span>
      </div>
    </div>
  );
}