Morphing infinity

MorphingInfinity is an animated line icon that cycles through circle and infinity forms. It is a good fit for AI replies, drafting flows, planning states, and any interface where the wait state should feel deliberate instead of generic.

import { MorphingInfinity } from "@/components/loading-ui/morphing-infinity";

export function MorphingInfinityDemo() {

Installation

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

Usage

Copyimport { MorphingInfinity } from "@/components/loading-ui/morphing-infinity";

Copy<MorphingInfinity />

Customization

MorphingInfinity is an SVG with a morphing path stroke. Use className and size-* utilities to scale it inline, and inherit currentColor from the surrounding text or foreground utilities.

Compact

Use a smaller size-* when the icon appears inside dense assistant panels, toolbars, or inline status rows.

import { MorphingInfinity } from "@/components/loading-ui/morphing-infinity";

export function MorphingInfinityCompact() {

Examples

These examples place the morphing infinity in assistant-oriented surfaces where a compact loading indicator needs to remain visible without becoming a full-page loader.

Alert

Alerts can pair the icon with one concise line about the work in progress.

import {
  Alert,
  AlertDescription,

Card

Cards keep the state attached to a specific assistant workspace or processing panel.

import {
  Card,
  CardContent,

Tabs

Tabs work well when generated content and supporting material resolve at different moments.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { MorphingInfinity } from "@/components/loading-ui/morphing-infinity";