Comet Spinner

A comet-shaped spinner with animated trails and rotation, used to indicate loading states in an application. It renders as a spinning comet with glowing trails. It behaves by continuously rotating and animating its shadow. Use it to show loading in user interfaces.

byTurboStarter from Loading UI

Installation

terminal

pnpm dlx layro-cli add @turbostarter/comet-spinner

npx layro-cli add @turbostarter/comet-spinner

npx layro-cli add @turbostarter/comet-spinner

bunx layro-cli add @turbostarter/comet-spinner

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import { cn } from "@/lib/utils";

const SHADOW_ANIMATION = "loading-ui-comet-shadow";
const ROTATION_ANIMATION = "loading-ui-comet-rotation";

type CometSpinnerProps = React.ComponentProps<"span"> & {
  headScale?: number;
  radiusScale?: number;
};

function clamp(value: number, min: number, max: number) {
  return Math.min(Math.max(value, min), max);
}