Satellite ring

import { SatelliteRing } from "@/components/loading-ui/satellite-ring";

export function SatelliteRingDemo() {

Installation

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

Usage

Copyimport { SatelliteRing } from "@/components/loading-ui/satellite-ring";

Copy<SatelliteRing />

Customization

SatelliteRing reads like a small body in orbit: a muted guide ring and a solid dot that travels the perimeter. It shines when the story is fan-out, replication, or “almost there” propagation rather than a generic busy spinner.

Size

Use size-* to balance the loader against labels, chips, and surrounding padding.

import { SatelliteRing } from "@/components/loading-ui/satellite-ring";

export function SatelliteRingSize() {

Color

The guide ring and satellite both follow currentColor, so you can inherit from parents or set hue with text utilities.

import { SatelliteRing } from "@/components/loading-ui/satellite-ring";

export function SatelliteRingColor() {

Ring weight

Thicker borders make the orbit feel more mechanical; thinner borders stay lighter in dense UIs.

import { SatelliteRing } from "@/components/loading-ui/satellite-ring";

export function SatelliteRingRingWeight() {

Duration

Tune --duration to match calm background work versus a more urgent cadence.

import { SatelliteRing } from "@/components/loading-ui/satellite-ring";

export function SatelliteRingDuration() {

Examples

These examples lean into spread and status narratives: rollouts, mesh relays, and badges that should feel like live systems rather than static chrome.

Button

In buttons, the satellite gives a clear “work is moving through the fleet” cue without extra illustration.

import { Button } from "@/components/ui/button";
import { SatelliteRing } from "@/components/loading-ui/satellite-ring";

Badge

Compact pills stay legible because the motion stays tight to the ring.

import { Badge } from "@/components/ui/badge";
import { SatelliteRing } from "@/components/loading-ui/satellite-ring";

Accordion

Inside an accordion, the loader can headline a section that is still converging while the rest of the checklist stays scannable.

import {
  Accordion,
  AccordionContent,

Sheet

A sheet is a good fit when the detail pane should explain why propagation is still running.

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