Swirling

import { Swirling } from "@/components/loading-ui/swirling";

export function SwirlingDemo() {

Installation

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

Usage

Copyimport { Swirling } from "@/components/loading-ui/swirling";

Copy<Swirling />

Customization

Swirling is one of the more expressive loaders in the set. It works best when you want motion to feel visible and intentional rather than quietly backgrounded, so the most useful adjustments are the ones that shift its visual weight and character directly.

Size

Use size-* utilities to move the spinner between compact control states and larger featured loading surfaces.

import { Swirling } from "@/components/loading-ui/swirling";

export function SwirlingSize() {

Color

The stroke uses currentColor, which makes it straightforward to align with accent colors, muted surfaces, or stronger brand moments.

import { Swirling } from "@/components/loading-ui/swirling";

export function SwirlingColor() {

Stroke Width

Changing the stroke width noticeably affects how bold or airy the swirl feels, especially at larger sizes.

import { Swirling } from "@/components/loading-ui/swirling";

export function SwirlingStrokeWidth() {

Line Cap

Adjusting the stroke line cap changes the overall texture of the motion, from softer rounded edges to a sharper mechanical look.

import { Swirling } from "@/components/loading-ui/swirling";

export function SwirlingLineCap() {

Examples

These examples lean into the more expressive side of Swirling. It usually works best in higher-visibility states where a bit of motion helps anchor attention instead of disappearing into the background.

Button

Use Swirling in buttons when the action is central enough that the pending state should feel active and noticeable.

import { Button } from "@/components/ui/button";
import { Swirling } from "@/components/loading-ui/swirling";

Collapsible

Inside a collapsible task summary, the loader can signal that detailed work is still progressing while the rest of the panel remains explorable.

import { ChevronsUpDownIcon } from "lucide-react";

import {

Alert

For long-running system work that deserves a stronger presence than a minimal spinner, Swirling gives the alert a more animated focal point.

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

Empty

In section-level loading states, the swirl has enough motion and visual mass to hold the layout on its own.

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