Skip to main content
The Classic Loader is a minimal, elegant spinning animation that displays a circular border with a transparent top section, creating a smooth rotation effect. Perfect for general loading states across your application.

​
Installation

npm install @craftdotui/loaders

​
Usage

import ClassicLoader from "@craftdotui/loaders/classic";

export default function App() {
  return <ClassicLoader />;
}

​
Props

The Classic Loader component does not accept any props. It uses the current text color from its parent container.

​
Styling

The loader automatically adapts to the text color of its parent container: 
<div className="text-blue-500">
  <ClassicLoader />
</div>

​
Examples

​
Button Loading State

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>
  );
}

​
Full Page Loader

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>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us