Skip to main content
The Pulsating Dots Loader displays five dots that scale from 0 to full size in a smooth, sequential wave pattern. This elegant loader creates a rhythmic pulsing effect perfect for modern interfaces.

​
Installation

npm install @craftdotui/loaders

​
Usage

import PulsingDots from "@craftdotui/loaders/pulsating-dots";

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

​
Props

The Pulsating Dots component does not accept any props. It displays five dots with a fixed pulsing animation.

​
Animation Details

  • Dots: 5 circular dots
  • Size: 10.32px per dot
  • Animation: Scale from 0 to 1 and back
  • Duration: 1.3 seconds per cycle
  • Delay: Sequential wave pattern (-0.25 fraction between dots)
  • Easing: Ease-in-out
  • Color: Black in light mode, white in dark mode

​
Examples

​
Loading Section

import PulsingDots from "@craftdotui/loaders/pulsating-dots";
import { Card } from "@/components/ui/card";

export default function LoadingSection() {
  return (
    <Card className="p-12">
      <div className="flex flex-col items-center gap-4">
        <h3 className="text-lg font-semibold">Loading Content</h3>
        <PulsingDots />
      </div>
    </Card>
  );
}

​
Inline Loading

import PulsingDots from "@craftdotui/loaders/pulsating-dots";

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

​
Full Page Loader

import PulsingDots from "@craftdotui/loaders/pulsating-dots";

export default function FullPageLoader() {
  return (
    <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm">
      <div className="flex flex-col items-center gap-6">
        <PulsingDots />
        <div className="text-center space-y-1">
          <p className="font-medium">Loading Application</p>
          <p className="text-sm text-muted-foreground">Please wait...</p>
        </div>
      </div>
    </div>
  );
}

​
Data Fetching

import PulsingDots from "@craftdotui/loaders/pulsating-dots";

export default function DataFetcher({ isLoading, data }) {
  if (isLoading) {
    return (
      <div className="border rounded-lg p-12">
        <div className="flex flex-col items-center gap-4">
          <PulsingDots />
          <p className="text-sm text-muted-foreground">Fetching data...</p>
        </div>
      </div>
    );
  }
  
  return <div>{data}</div>;
}

​
Button Loading

import PulsingDots from "@craftdotui/loaders/pulsating-dots";
import { Button } from "@/components/ui/button";

export default function LoadingButton({ isLoading, onClick, children }) {
  return (
    <div className="space-y-3">
      <Button onClick={onClick} disabled={isLoading} className="w-full">
        {children}
      </Button>
      {isLoading && (
        <div className="flex justify-center">
          <PulsingDots />
        </div>
      )}
    </div>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us