Zoomies Loader

npm install @craftdotui/loaders

import Zoomies from "@craftdotui/loaders/zoomies";
import { Card } from "@/components/ui/card";

export default function ProgressLoader() {
  return (
    <Card className="p-6">
      <div className="space-y-4">
        <h3 className="text-sm font-medium">Processing your request</h3>
        <Zoomies />
        <p className="text-xs text-muted-foreground">This may take a moment...</p>
      </div>
    </Card>
  );
}

import Zoomies from "@craftdotui/loaders/zoomies";

export default function TopBarLoader({ isLoading }) {
  if (!isLoading) return null;
  
  return (
    <div className="fixed top-0 left-0 right-0 z-50">
      <div className="w-full flex justify-center pt-4 pb-2 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <Zoomies />
      </div>
    </div>
  );
}

import Zoomies from "@craftdotui/loaders/zoomies";
import { Button } from "@/components/ui/button";

export default function SubmitForm({ onSubmit, isSubmitting }) {
  return (
    <form onSubmit={onSubmit} className="space-y-6">
      {/* Form fields */}
      
      <div className="space-y-4">
        <Button type="submit" disabled={isSubmitting} className="w-full">
          {isSubmitting ? "Submitting..." : "Submit"}
        </Button>
        
        {isSubmitting && (
          <div className="flex justify-center">
            <Zoomies />
          </div>
        )}
      </div>
    </form>
  );
}

import Zoomies from "@craftdotui/loaders/zoomies";

export default function ListLoader({ isLoading, items }) {
  if (isLoading) {
    return (
      <div className="space-y-4 p-6 border rounded-lg">
        <p className="text-sm font-medium text-center">Loading items...</p>
        <div className="flex justify-center">
          <Zoomies />
        </div>
      </div>
    );
  }
  
  return (
    <ul className="space-y-2">
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

import Zoomies from "@craftdotui/loaders/zoomies";

export default function InlineContentLoader({ isLoading, content }) {
  return (
    <div className="min-h-[200px]">
      {isLoading ? (
        <div className="flex flex-col items-center justify-center h-full gap-4 py-12">
          <Zoomies />
          <p className="text-sm text-muted-foreground">Fetching content...</p>
        </div>
      ) : (
        content
      )}
    </div>
  );
}