Twin orbit

TwinOrbit is a compact loader built from one center dot and two markers that orbit in a half-cycle offset. The balanced motion makes it a good fit for pairing, matching, comparison, replication, or reconciliation states where a single-direction spinner feels too generic.

import { TwinOrbit } from "@/components/loading-ui/twin-orbit";

export function TwinOrbitDemo() {

Installation

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

Usage

Copyimport { TwinOrbit } from "@/components/loading-ui/twin-orbit";

Copy<TwinOrbit />

Customization

TwinOrbit uses currentColor and scales from the element size. Because the orbiting markers travel outside the center dot, leave a little more horizontal space than the declared size-* utility suggests.

Size

Small sizes work well inline, while larger dots can anchor compact panel or status-row loading states.

import { TwinOrbit } from "@/components/loading-ui/twin-orbit";

export function TwinOrbitSize() {

Color

The center and orbiting markers inherit currentColor, so color can come from the surrounding shadcn component or a direct text color utility.

import { TwinOrbit } from "@/components/loading-ui/twin-orbit";

export function TwinOrbitColor() {

Duration

Set --duration to tune the pace. The second marker stays half a cycle behind so the orbit remains balanced at slower and faster speeds.

import { TwinOrbit } from "@/components/loading-ui/twin-orbit";

export function TwinOrbitDuration() {