Spiral

import { Spiral } from "@/components/loading-ui/spiral";

export function SpiralDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/spiral
Copy

Usage

Copyimport { Spiral } from "@/components/loading-ui/spiral";

Copy<Spiral />

Customization

Spiral is a more characterful loader that builds its motion from dots moving around a circular path. The most meaningful changes come from dot density, how wide the spiral sits, and the overall size and color treatment.

Size

Scale the component with size-* utilities depending on whether it appears inline or anchors a larger loading state.

import { Spiral } from "@/components/loading-ui/spiral";

export function SpiralSize() {

Color

Because each dot uses currentColor, the component can inherit the surrounding tone or be styled directly with any text color utility.

import { Spiral } from "@/components/loading-ui/spiral";

export function SpiralColor() {

Dot Count

The dots prop changes the density of the motion path, from more minimal to more continuous.

import { Spiral } from "@/components/loading-ui/spiral";

export function SpiralDots() {

Radius

Use the radius prop to tighten or widen the spiral without changing the outer size of the component.

import { Spiral } from "@/components/loading-ui/spiral";

export function SpiralRadius() {

Examples

These examples use Spiral in places where its motion can add a bit more personality to the waiting state instead of disappearing into the background.

Button

In primary actions, Spiral gives the pending state a little more energy than a plain inline spinner.

import { Button } from "@/components/ui/button";
import { Spiral } from "@/components/loading-ui/spiral";

Collapsible

Inside a collapsible processing panel, it helps anchor the summary while deeper details remain available underneath.

import { ChevronsUpDownIcon } from "lucide-react";

import {

Empty

For featured waiting states, Spiral has enough presence to hold the layout without needing extra decoration.

import { Button } from "@/components/ui/button";
import {
  Empty,

Tabs

In tabbed workspaces, it works well when one panel is still loading but the rest of the UI should stay usable.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Spiral } from "@/components/loading-ui/spiral";