Skip to main content
The Jumping Dots Loader displays four circular dots that bounce vertically in a staggered sequence, creating a playful and engaging loading animation. This loader is perfect for casual applications or when you want to add a touch of personality to loading states.

​
Installation

npm install @craftdotui/loaders

​
Usage

import JumpingDots from "@craftdotui/loaders/jumping-dots";

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

​
Props

The Jumping Dots component does not accept any props. It displays four dots with a fixed animation sequence.

​
Animation Details

  • Dots: 4 circular dots
  • Animation: Each dot jumps 200% of its height vertically
  • Duration: 1 second per cycle
  • Delay: 0.15 seconds between each dot
  • Color: Black in light mode, white in dark mode

​
Examples

​
Loading Message

import JumpingDots from "@craftdotui/loaders/jumping-dots";

export default function ProcessingMessage() {
  return (
    <div className="flex items-center gap-3">
      <span className="text-sm font-medium">Processing</span>
      <JumpingDots />
    </div>
  );
}

​
Card Loading State

import JumpingDots from "@craftdotui/loaders/jumping-dots";
import { Card, CardContent } from "@/components/ui/card";

export default function LoadingCard() {
  return (
    <Card>
      <CardContent className="flex items-center justify-center py-12">
        <JumpingDots />
      </CardContent>
    </Card>
  );
}

​
Inline Loading

import JumpingDots from "@craftdotui/loaders/jumping-dots";

export default function InlineLoader({ isLoading, children }) {
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-24">
        <JumpingDots />
      </div>
    );
  }
  
  return children;
}

​
Center Screen

import JumpingDots from "@craftdotui/loaders/jumping-dots";

export default function FullPageLoader() {
  return (
    <div className="fixed inset-0 flex items-center justify-center">
      <JumpingDots />
    </div>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us