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
Five dots that pulse in and out in a sequential wave pattern
npm install @craftdotui/loaders
import PulsingDots from "@craftdotui/loaders/pulsating-dots";
export default function App() {
return <PulsingDots />;
}
import PulsingDots from "@craftdotui/loaders/pulsating-dots";
export default function LoadingState() {
return (
<div className="flex items-center justify-center p-8">
<PulsingDots />
</div>
);
}
import PulsingDots from "@craftdotui/loaders/pulsating-dots";
export default function LoadingView() {
return (
<div className="flex flex-col items-center gap-4">
<PulsingDots />
<p className="text-sm text-muted-foreground">Loading...</p>
</div>
);
}
import PulsingDots from "@craftdotui/loaders/pulsating-dots";
import { Card } from "@/components/ui/card";
export default function LoadingSection() {
return (
<Card className="p-12">
<div className="flex flex-col items-center gap-4">
<h3 className="text-lg font-semibold">Loading Content</h3>
<PulsingDots />
</div>
</Card>
);
}
import PulsingDots from "@craftdotui/loaders/pulsating-dots";
export default function InlineLoader({ isLoading, children }) {
if (isLoading) {
return (
<div className="flex items-center justify-center h-32">
<PulsingDots />
</div>
);
}
return children;
}
import PulsingDots from "@craftdotui/loaders/pulsating-dots";
export default function FullPageLoader() {
return (
<div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm">
<div className="flex flex-col items-center gap-6">
<PulsingDots />
<div className="text-center space-y-1">
<p className="font-medium">Loading Application</p>
<p className="text-sm text-muted-foreground">Please wait...</p>
</div>
</div>
</div>
);
}
import PulsingDots from "@craftdotui/loaders/pulsating-dots";
export default function DataFetcher({ isLoading, data }) {
if (isLoading) {
return (
<div className="border rounded-lg p-12">
<div className="flex flex-col items-center gap-4">
<PulsingDots />
<p className="text-sm text-muted-foreground">Fetching data...</p>
</div>
</div>
);
}
return <div>{data}</div>;
}
import PulsingDots from "@craftdotui/loaders/pulsating-dots";
import { Button } from "@/components/ui/button";
export default function LoadingButton({ isLoading, onClick, children }) {
return (
<div className="space-y-3">
<Button onClick={onClick} disabled={isLoading} className="w-full">
{children}
</Button>
{isLoading && (
<div className="flex justify-center">
<PulsingDots />
</div>
)}
</div>
);
}