Infinity

InfinityLoop draws a continuous dash around an infinity path. It is a good fit for live sync, monitoring, background jobs, and long-running states where there is no useful percent-complete value.

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

export function InfinityDemo() {

Installation

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

Usage

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

Copy<InfinityLoop className="h-12 w-16" />

Customization

InfinityLoop is an SVG that inherits currentColor. Use stable height and width utilities to keep the loop balanced, target the path for line weight, and set --duration to tune the dash speed.

Size

The loop reads best with a slightly wider box than it is tall.

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

export function InfinitySize() {

Color

The stroke uses currentColor, so text utilities and inherited foreground colors are enough.

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

export function InfinityColor() {

Duration

Set --duration when the loop should feel fast for active sync or slower for ambient background work.

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

export function InfinityDuration() {

Stroke Width

Target the path when the loop needs a lighter or heavier stroke at a given size.

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

export function InfinityStrokeWidth() {

Examples

These examples keep the loop tied to continuous states: syncing, monitoring, streaming updates, and long-running background activity.

Button

Buttons work well when a command starts an ongoing sync or keeps a connection alive.

import { Button } from "@/components/ui/button";
import { InfinityLoop } from "@/components/loading-ui/infinity";

Badge

Badges can keep continuous status visible without adding a full loading row.

import { Badge } from "@/components/ui/badge";
import { InfinityLoop } from "@/components/loading-ui/infinity";

Card

Cards give the loop enough room to explain a background process that continues while the rest of the page stays interactive.

import {
  Card,
  CardContent,

Empty

Empty states can use the loop for long-running setup, sync, or monitoring states that may not finish immediately.

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