Skip to content
earthlingUI
Components

Spinner

Indicates short activity when completion cannot be measured.

Syncing changes…

Playground

scheme

Sets the spinner color.

size

Sets the spinner dimensions.

Usage

tsx
import { Spinner } from "earthling-ui/spinner";

export function Example() {
  return (
    <>
      <Spinner aria-label="Syncing changes" size="md" />
    </>
  );
}
  • Give each spinner a label that names the operation, especially when no visible text accompanies it.
  • Use Progress when completion can be measured or the wait is expected to be long.
  • Rotation stops under reduced motion while the status label remains available.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

bash
npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx
// Generated by dts-bundle-generator v9.5.1

import { VariantProps } from 'class-variance-authority';
import { ComponentProps } from 'react';

export declare const spinnerVariants: (props?: ({
	scheme?: "default" | "primary" | "secondary" | "tertiary" | "neutral" | "muted" | "good" | "caution" | "bad" | null | undefined;
	size?: "sm" | "md" | "lg" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface SpinnerProps extends ComponentProps<"span">, VariantProps<typeof spinnerVariants> {
}
export declare const Spinner: import("react").ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

export {};

Runtime dependencies: class-variance-authority, cnfast.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Spinner implementation
tsx
"use client";

import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/utils/cn";
import { schemes } from "@/utils/variants";
import { type ComponentProps, forwardRef } from "react";

const spinnerVariants = cva(
  "inline-block shrink-0 animate-spin icon-[lucide--loader-circle] text-(--scheme-tint) motion-reduce:animate-none",
  {
    variants: {
      scheme: { ...schemes, default: "[--scheme-tint:currentColor]" },
      size: { sm: "size-4", md: "size-5", lg: "size-7" },
    },
    defaultVariants: { scheme: "default", size: "md" },
  },
);

export interface SpinnerProps
  extends ComponentProps<"span">, VariantProps<typeof spinnerVariants> {}

const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
  ({ className, scheme, size, ...props }, ref) => {
    return (
      <span
        ref={ref}
        role="status"
        aria-label="Loading"
        data-scheme={scheme}
        className={cn(spinnerVariants({ scheme, size }), className)}
        {...props}
      />
    );
  },
);
Spinner.displayName = "Spinner";

export { Spinner, spinnerVariants };