Motion Loaders

A collection of beautiful, animated loading components built with React, Framer Motion, and Tailwind CSS.

Live Demo

See this package in action at BreakToGoal - A Goal Planner That Break goals into action using our loaders.

Features

• 🎨 Beautiful Animations: Smooth transitions using Framer Motion.
• ♾️ Infinite Scrolling: Seamless looping animations for continuous loading states.
• 🛠️ Customizable: Full control over styling via Tailwind classes and variants.
• 🌗 Themable: Support for distinct variants (Text vs. Icon) and custom color themes.
• 📦 Lightweight: Built on modern standards.

Installation

pnpm add motion-loaders framer-motion lucide-react clsx tailwind-merge

Components

ChecklistLoader

A component that cycles through a list of items, simulating a "checking" process. It features a seamless infinite scroll where completed items move up and new items enter from the bottom.

Basic Usage

import { ChecklistLoader } from 'motion-loaders';

function App() {
  return (
    <div className="flex justify-center items-center h-screen bg-black">
      <ChecklistLoader />
    </div>
  );
}

Variants

Text Mode (Default) Displays a list of text labels with icons.

<ChecklistLoader variant="text" />

Icon Mode A compact version showing only icons and horizontal bars, perfect for smaller widgets or minimal layouts.

<ChecklistLoader variant="icon" />

Customization

You can customize the appearance using the classNames prop to override default Tailwind classes. This is useful for implementing different themes (e.g., Light Mode).

<ChecklistLoader 
  classNames={{
    container: "bg-white border border-gray-200 shadow-lg", // Light background
    text: "text-gray-500", // Default text color
    success: "text-green-500" // Success state (checkmarks) color
  }}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | ChecklistItem[] | Default list | Array of items { id: string, label: string } to cycle through. | | onComplete | () => void | undefined | Callback fired when a loop sequence completes. | | variant | 'text' \| 'icon' | 'text' | Visual style of the loader. | | classNames | object | {} | Custom styles for checking components. |

Development

1. Clone the repository.
2. Install dependencies: pnpm install.
3. Start the dev server: pnpm dev.

License

MIT