Newton's Cradle Loader

The Newton’s Cradle Loader mimics the classic physics demonstration toy with five dots where the outer dots swing back and forth in an alternating pattern. This loader provides a sophisticated, physics-inspired animation perfect for educational or professional applications.

Installation

npm install @craftdotui/loaders

Usage

import NewtonsCradle from "@craftdotui/loaders/newtons-cradle";

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

import NewtonsCradle from "@craftdotui/loaders/newtons-cradle";

export default function LoadingState() {
  return (
    <div className="flex items-center justify-center p-8">
      <NewtonsCradle />
    </div>
  );
}

import NewtonsCradle from "@craftdotui/loaders/newtons-cradle";

export default function ProcessingView() {
  return (
    <div className="flex flex-col items-center gap-6">
      <NewtonsCradle />
      <p className="text-sm text-muted-foreground">Calculating results...</p>
    </div>
  );
}

Props

The Newton’s Cradle component does not accept any props. It displays five dots with a fixed swinging animation.

Animation Details

Dots: 5 circular dots in a row
Animation: First and last dots swing 70 degrees
Duration: 1.4 seconds per cycle
Pattern: Alternating swing between left and right dots
Color: Uses the primary color from your theme
Physics: Mimics the timing of a real Newton’s cradle

Examples

Loading Screen

import NewtonsCradle from "@craftdotui/loaders/newtons-cradle";

export default function LoadingScreen() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="flex flex-col items-center gap-6">
        <NewtonsCradle />
        <div className="text-center space-y-2">
          <h2 className="text-xl font-semibold">Loading</h2>
          <p className="text-sm text-muted-foreground">
            Please wait while we prepare your content
          </p>
        </div>
      </div>
    </div>
  );
}

Card Loading State

import NewtonsCradle from "@craftdotui/loaders/newtons-cradle";
import { Card, CardContent } from "@/components/ui/card";

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

Data Processing

import NewtonsCradle from "@craftdotui/loaders/newtons-cradle";

export default function DataProcessor({ isProcessing, results }) {
  if (isProcessing) {
    return (
      <div className="flex flex-col items-center justify-center p-12 border rounded-lg">
        <NewtonsCradle />
        <p className="mt-6 text-sm font-medium">Processing data...</p>
        <p className="text-xs text-muted-foreground mt-1">
          This may take a few moments
        </p>
      </div>
    );
  }
  
  return <div>{results}</div>;
}

import NewtonsCradle from "@craftdotui/loaders/newtons-cradle";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

export default function ProcessingModal({ open, operation }) {
  return (
    <Dialog open={open}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Processing {operation}</DialogTitle>
          <DialogDescription>
            Your request is being processed. Please do not close this window.
          </DialogDescription>
        </DialogHeader>
        <div className="flex items-center justify-center py-12">
          <NewtonsCradle />
        </div>
      </DialogContent>
    </Dialog>
  );
}

Get Started

Base UI Components

Craft UI Components

Loaders

Hooks

Guides

Newton's Cradle Loader

Installation

Usage

Props

Animation Details

Examples

Loading Screen

Card Loading State

Data Processing

​Installation

​Usage

​Props

​Animation Details

​Examples

​Loading Screen

​Card Loading State

​Data Processing

​Modal Loading

Installation

Usage

Props

Animation Details

Examples

Loading Screen

Card Loading State

Data Processing

Modal Loading