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
A minimal circular spinner with a bottom border that rotates
npm install @craftdotui/loaders
import Spinner from "@craftdotui/loaders/spinner";
export default function App() {
return <Spinner />;
}
import Spinner from "@craftdotui/loaders/spinner";
export default function LoadingState() {
return (
<div className="flex items-center justify-center p-8">
<Spinner />
</div>
);
}
import Spinner from "@craftdotui/loaders/spinner";
export default function AccessibleLoader() {
return (
<div className="flex items-center justify-center p-8" aria-live="polite">
<Spinner />
<span className="sr-only">Loading...</span>
</div>
);
}
sr-only loading message.
animate-spinimport Spinner from "@craftdotui/loaders/spinner";
import { Button } from "@/components/ui/button";
export default function LoadingButton({ isLoading, children, ...props }) {
return (
<Button disabled={isLoading} {...props}>
{isLoading ? (
<div className="flex items-center gap-2">
<div className="scale-50">
<Spinner />
</div>
<span>Loading...</span>
</div>
) : (
children
)}
</Button>
);
}
import Spinner from "@craftdotui/loaders/spinner";
import { Card, CardContent } from "@/components/ui/card";
export default function LoadingCard() {
return (
<Card>
<CardContent className="flex items-center justify-center py-16">
<Spinner />
</CardContent>
</Card>
);
}
import Spinner from "@craftdotui/loaders/spinner";
export default function ConditionalContent({ isLoading, content }) {
if (isLoading) {
return (
<div className="flex items-center justify-center min-h-[200px]">
<Spinner />
</div>
);
}
return <div>{content}</div>;
}
import Spinner from "@craftdotui/loaders/spinner";
export default function OverlayLoader({ isLoading, children }) {
return (
<div className="relative">
{children}
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm">
<Spinner />
</div>
)}
</div>
);
}
import Spinner from "@craftdotui/loaders/spinner";
export default function PageLoader() {
return (
<div className="fixed inset-0 flex items-center justify-center bg-background">
<div className="flex flex-col items-center gap-4">
<Spinner />
<p className="text-sm text-muted-foreground">Loading page...</p>
</div>
</div>
);
}