Skip to main content
The Orbit Loader features two dots moving in a horizontal orbital pattern with dynamic scale and opacity changes, creating an elegant and sophisticated loading animation. The dots appear to orbit around an invisible center point with smooth transitions.

​
Installation

npm install @craftdotui/loaders

​
Usage

import Orbit from "@craftdotui/loaders/orbit";

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

​
Props

​
className
string
Additional CSS classes to apply to the container. Useful for adjusting size or positioning.

​
Animation Details

  • Dots: 2 dots in orbital motion
  • Size: 35px default orbit size
  • Duration: 1.4 seconds per orbit
  • Animation: Complex horizontal movement with scale and opacity transitions
  • Color: Uses the primary color from your theme
  • Pattern: Dots are offset by half the animation duration (opposite sides)

​
Examples

​
Custom Size

import Orbit from "@craftdotui/loaders/orbit";

export default function CustomSizeLoader() {
  return (
    <div className="space-y-8 p-8">
      <div>
        <p className="text-sm mb-4">Small</p>
        <Orbit className="w-8 h-8" />
      </div>
      
      <div>
        <p className="text-sm mb-4">Medium (Default)</p>
        <Orbit />
      </div>
      
      <div>
        <p className="text-sm mb-4">Large</p>
        <Orbit className="w-20 h-20" />
      </div>
    </div>
  );
}

​
Loading Screen

import Orbit from "@craftdotui/loaders/orbit";

export default function LoadingScreen() {
  return (
    <div className="fixed inset-0 flex items-center justify-center bg-background">
      <div className="flex flex-col items-center gap-6">
        <Orbit className="w-16 h-16" />
        <div className="text-center space-y-2">
          <h2 className="text-lg font-semibold">Loading</h2>
          <p className="text-sm text-muted-foreground">Please wait...</p>
        </div>
      </div>
    </div>
  );
}

​
Centered Container

import Orbit from "@craftdotui/loaders/orbit";

export default function CenteredLoader() {
  return (
    <div className="flex items-center justify-center min-h-[400px] border rounded-lg">
      <Orbit />
    </div>
  );
}

​
With Loading Message

import Orbit from "@craftdotui/loaders/orbit";

export default function LoadingWithMessage({ message = "Loading..." }) {
  return (
    <div className="flex flex-col items-center justify-center gap-4 p-8">
      <Orbit />
      <p className="text-sm font-medium text-muted-foreground">{message}</p>
    </div>
  );
}

​
Modal Loading State

import Orbit from "@craftdotui/loaders/orbit";
import {
  Dialog,
  DialogContent,
} from "@/components/ui/dialog";

export default function LoadingModal({ open }) {
  return (
    <Dialog open={open}>
      <DialogContent className="sm:max-w-md">
        <div className="flex flex-col items-center justify-center py-12 gap-6">
          <Orbit className="w-16 h-16" />
          <div className="text-center space-y-2">
            <p className="font-semibold">Processing</p>
            <p className="text-sm text-muted-foreground">
              This will only take a moment
            </p>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us