Comet spinner

import { CometSpinner } from "@/components/loading-ui/comet-spinner";

export function CometSpinnerDemo() {

Installation

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

Usage

Copyimport { CometSpinner } from "@/components/loading-ui/comet-spinner";

Copy<CometSpinner />

Customization

CometSpinner is built from layered box-shadow motion plus rotation, wrapped in a container query box so orbit math scales with size-*. Color comes from currentColor, and timing is driven by --duration.

Size

The spinner is aspect-square; grow or shrink it with size-* depending on the density of the surrounding layout.

import { CometSpinner } from "@/components/loading-ui/comet-spinner";

export function CometSpinnerSize() {

Color

Set hue with text utilities—the head and tail inherit through the foreground color.

import { CometSpinner } from "@/components/loading-ui/comet-spinner";

export function CometSpinnerColor() {

Duration

Set --duration with a CSS time value. The same value paces both the tail morph and the rotation.

import { CometSpinner } from "@/components/loading-ui/comet-spinner";

export function CometSpinnerDuration() {

Geometry

headScale and radiusScale are clamped helpers that reshape the comet: smaller heads feel sharper, larger radii widen the sweep.

import { CometSpinner } from "@/components/loading-ui/comet-spinner";

export function CometSpinnerGeometry() {

Examples

These examples lean into burst, upload, and fast-lane stories where the motion should feel directional.

Button

Compact size-* on the icon slot keeps the comet legible beside label text.

import { Button } from "@/components/ui/button";
import { CometSpinner } from "@/components/loading-ui/comet-spinner";

Badge

In chips, a smaller comet still reads as motion without stealing focus from the label.

import { Badge } from "@/components/ui/badge";
import { CometSpinner } from "@/components/loading-ui/comet-spinner";

Alert

Pair the comet with a strong headline when the event is positive or neutral but still in flight.

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

Tabs

Use tabs when only one surface is “burning hot” while the rest of the page stays cool and interactive.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { CometSpinner } from "@/components/loading-ui/comet-spinner";