Getting Started

Quick Start

Get your first loader on screen in under a minute.

Basic usage

Import Loader and pass a name. That's it.

Marinating…

sweep

Note:The import path follows the components alias in your components.json. It's usually @/components, which makes it @/components/soonish.

Next.js App Router

Loader has no hooks, so it works in Server Components without "use client". That makes it a good fit for a route's loading.tsx:

app/loading.tsx

// A Server Component — no "use client" needed.
import { Loader } from '@/components/soonish';

export default function Loading() {
  return (
    <div className="flex h-screen items-center justify-center">
      <Loader name="ripple" size={16} />
    </div>
  );
}

Good to know:Next.js shows loading.tsx automatically while the page streams in.

Vite and other React apps

Nothing to configure. Import it and use it.

src/App.tsx

import { Loader } from '@/components/soonish';

function App() {
  return (
    <div>
      <Loader name="thinking" />
    </div>
  );
}

Pick a loader

name takes any of the 91 loader names, and your editor autocompletes them.

examples.tsx

import { Loader } from '@/components/soonish';

// Pulse waves
<Loader name="sweep" />
<Loader name="ripple" />
<Loader name="spiral" />

// AI / process
<Loader name="thinking" />
<Loader name="searching" />
<Loader name="generating" />

// Scale animations
<Loader name="twist" />
<Loader name="jelly" />
<Loader name="burst" />

// Mandalas
<Loader name="snowflake" />
<Loader name="lotus" />

See all 91 on the home page. Hover one to copy its install command.