Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Powered by Mintlify
Auto-generate your docs
Three dots that animate in a leapfrogging pattern, rotating and moving horizontally
npm install @craftdotui/loaders
import LeapFrog from "@craftdotui/loaders/leapfrog";
export default function App() {
return <LeapFrog />;
}
import LeapFrog from "@craftdotui/loaders/leapfrog";
export default function LoadingState() {
return (
<div className="flex items-center justify-center p-8">
<LeapFrog />
</div>
);
}
import LeapFrog from "@craftdotui/loaders/leapfrog";
export default function ProcessingView() {
return (
<div className="flex flex-col items-center gap-4">
<LeapFrog />
<p className="text-sm text-muted-foreground">Processing request...</p>
</div>
);
}
import LeapFrog from "@craftdotui/loaders/leapfrog";
import { Card } from "@/components/ui/card";
export default function LoadingPanel() {
return (
<Card className="flex items-center justify-center p-12">
<LeapFrog />
</Card>
);
}
import LeapFrog from "@craftdotui/loaders/leapfrog";
export default function CenteredLoader() {
return (
<div className="min-h-screen flex items-center justify-center">
<LeapFrog />
</div>
);
}
import LeapFrog from "@craftdotui/loaders/leapfrog";
export default function LoadingWithText({ message = "Loading..." }) {
return (
<div className="flex flex-col items-center justify-center gap-6">
<LeapFrog />
<div className="text-center">
<h3 className="font-semibold">{message}</h3>
<p className="text-sm text-muted-foreground">Please wait a moment</p>
</div>
</div>
);
}
import LeapFrog from "@craftdotui/loaders/leapfrog";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
export default function LoadingModal({ open }) {
return (
<Dialog open={open}>
<DialogContent>
<DialogHeader>
<DialogTitle>Processing</DialogTitle>
<DialogDescription>
Your request is being processed
</DialogDescription>
</DialogHeader>
<div className="flex items-center justify-center py-8">
<LeapFrog />
</div>
</DialogContent>
</Dialog>
);
}