Spinner

A loading spinner component with customizable size and color. It renders an animated SVG with gradient fills. It behaves by spinning continuously and can be adjusted for size and speed. Use it to indicate loading states in user interfaces.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/spinner

npx layro-cli add @xxtomm/spinner

npx layro-cli add @xxtomm/spinner

bunx layro-cli add @xxtomm/spinner

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

Code

Demo

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

type SizeVariant = "sm" | "default" | "md" | "lg";
type SpeedVariant = "slow" | "normal" | "fast";

const SpinnerPrimitive = React.forwardRef<
  React.ElementRef<"svg">,
  React.SVGProps<SVGSVGElement>
>(
  ({ ...props }, ref) => {
    const id = React.useId();