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 simple spinning circle loader with a transparent top border
npm install @craftdotui/loaders
import ClassicLoader from "@craftdotui/loaders/classic";
export default function App() {
return <ClassicLoader />;
}
import ClassicLoader from "@craftdotui/loaders/classic";
import { Card } from "@/components/ui/card";
export default function LoadingCard() {
return (
<Card className="flex items-center justify-center p-8">
<ClassicLoader />
</Card>
);
}
import ClassicLoader from "@craftdotui/loaders/classic";
export default function DataDisplay({ isLoading, data }) {
if (isLoading) {
return (
<div className="flex items-center justify-center h-48">
<ClassicLoader />
</div>
);
}
return <div>{data}</div>;
}
<div className="text-blue-500">
<ClassicLoader />
</div>
<div className="text-4xl">
<ClassicLoader />
</div>
<div className="text-purple-600">
<ClassicLoader />
</div>
import ClassicLoader from "@craftdotui/loaders/classic";
import { Button } from "@/components/ui/button";
export default function SubmitButton({ isLoading }) {
return (
<Button disabled={isLoading}>
{isLoading ? (
<div className="flex items-center gap-2">
<ClassicLoader />
<span>Loading...</span>
</div>
) : (
"Submit"
)}
</Button>
);
}
import ClassicLoader from "@craftdotui/loaders/classic";
export default function PageLoader() {
return (
<div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm">
<ClassicLoader />
</div>
);
}