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
An animated loader featuring four dots that jump up and down in sequence
npm install @craftdotui/loaders
import JumpingDots from "@craftdotui/loaders/jumping-dots";
export default function App() {
return <JumpingDots />;
}
import JumpingDots from "@craftdotui/loaders/jumping-dots";
export default function LoadingState() {
return (
<div className="flex items-center justify-center p-8">
<JumpingDots />
</div>
);
}
import JumpingDots from "@craftdotui/loaders/jumping-dots";
export default function LoadingWithMessage() {
return (
<div className="flex flex-col items-center gap-4">
<JumpingDots />
<p className="text-sm text-muted-foreground">Loading your data...</p>
</div>
);
}
import JumpingDots from "@craftdotui/loaders/jumping-dots";
export default function ProcessingMessage() {
return (
<div className="flex items-center gap-3">
<span className="text-sm font-medium">Processing</span>
<JumpingDots />
</div>
);
}
import JumpingDots from "@craftdotui/loaders/jumping-dots";
import { Card, CardContent } from "@/components/ui/card";
export default function LoadingCard() {
return (
<Card>
<CardContent className="flex items-center justify-center py-12">
<JumpingDots />
</CardContent>
</Card>
);
}
import JumpingDots from "@craftdotui/loaders/jumping-dots";
export default function InlineLoader({ isLoading, children }) {
if (isLoading) {
return (
<div className="flex items-center justify-center h-24">
<JumpingDots />
</div>
);
}
return children;
}
import JumpingDots from "@craftdotui/loaders/jumping-dots";
export default function FullPageLoader() {
return (
<div className="fixed inset-0 flex items-center justify-center">
<JumpingDots />
</div>
);
}