Skip to main content
The Zoomies Loader displays a horizontal bar that continuously zooms from left to right across a track, creating a fast-paced, energetic loading animation. This loader is perfect for conveying speed and progress in your loading states.

​
Installation

npm install @craftdotui/loaders

​
Usage

import Zoomies from "@craftdotui/loaders/zoomies";

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

​
Props

The Zoomies component does not accept any props. It displays a fixed-width horizontal zoom animation.

​
Animation Details

  • Width: 80px
  • Height: 5px
  • Border Radius: 2.5px
  • Animation: Horizontal translation from -100% to +100%
  • Duration: 1.4 seconds per cycle
  • Easing: Ease-in-out
  • Track Color: 10% opacity of text color
  • Bar Color: Black in light mode, white in dark mode

​
Examples

​
Progress-Style Loader

import Zoomies from "@craftdotui/loaders/zoomies";
import { Card } from "@/components/ui/card";

export default function ProgressLoader() {
  return (
    <Card className="p-6">
      <div className="space-y-4">
        <h3 className="text-sm font-medium">Processing your request</h3>
        <Zoomies />
        <p className="text-xs text-muted-foreground">This may take a moment...</p>
      </div>
    </Card>
  );
}

​
Top Bar Loader

import Zoomies from "@craftdotui/loaders/zoomies";

export default function TopBarLoader({ isLoading }) {
  if (!isLoading) return null;
  
  return (
    <div className="fixed top-0 left-0 right-0 z-50">
      <div className="w-full flex justify-center pt-4 pb-2 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <Zoomies />
      </div>
    </div>
  );
}

​
Form Submission

import Zoomies from "@craftdotui/loaders/zoomies";
import { Button } from "@/components/ui/button";

export default function SubmitForm({ onSubmit, isSubmitting }) {
  return (
    <form onSubmit={onSubmit} className="space-y-6">
      {/* Form fields */}
      
      <div className="space-y-4">
        <Button type="submit" disabled={isSubmitting} className="w-full">
          {isSubmitting ? "Submitting..." : "Submit"}
        </Button>
        
        {isSubmitting && (
          <div className="flex justify-center">
            <Zoomies />
          </div>
        )}
      </div>
    </form>
  );
}

​
List Loading

import Zoomies from "@craftdotui/loaders/zoomies";

export default function ListLoader({ isLoading, items }) {
  if (isLoading) {
    return (
      <div className="space-y-4 p-6 border rounded-lg">
        <p className="text-sm font-medium text-center">Loading items...</p>
        <div className="flex justify-center">
          <Zoomies />
        </div>
      </div>
    );
  }
  
  return (
    <ul className="space-y-2">
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

​
Inline Content Loader

import Zoomies from "@craftdotui/loaders/zoomies";

export default function InlineContentLoader({ isLoading, content }) {
  return (
    <div className="min-h-[200px]">
      {isLoading ? (
        <div className="flex flex-col items-center justify-center h-full gap-4 py-12">
          <Zoomies />
          <p className="text-sm text-muted-foreground">Fetching content...</p>
        </div>
      ) : (
        content
      )}
    </div>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us