or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

bar-linear-spinners.mdcircular-spinners.mddot-beat-spinners.mdindex.mdspecialty-spinners.md
tile.json

tessl/npm-react-spinners

A comprehensive collection of customizable React loading spinner components with TypeScript support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-spinners@0.17.x

To install, run

npx @tessl/cli install tessl/npm-react-spinners@0.17.0

index.mddocs/

React Spinners

React Spinners is a comprehensive collection of customizable loading spinner components for React applications. It offers 23 different animated spinner types including ClipLoader, BeatLoader, RingLoader, and many others. Built with TypeScript and zero dependencies, the library provides a consistent API where each spinner accepts common props like loading, color, cssOverride, and speedMultiplier, along with spinner-specific sizing properties.

Package Information

  • Package Name: react-spinners
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-spinners
  • Zero Dependencies: No external runtime dependencies
  • Tree Shaking: Full ESM support for optimal bundle sizes

Core Imports

import { ClipLoader, BeatLoader, BarLoader } from "react-spinners";

For CommonJS:

const { ClipLoader, BeatLoader, BarLoader } = require("react-spinners");

Individual imports for better tree shaking:

import ClipLoader from "react-spinners/ClipLoader";
import BeatLoader from "react-spinners/BeatLoader";

Basic Usage

import React, { useState } from "react";
import { ClipLoader } from "react-spinners";

function App() {
  const [loading, setLoading] = useState(true);

  return (
    <div>
      <ClipLoader
        loading={loading}
        color="#36d7b7"
        size={50}
        aria-label="Loading Spinner"
        data-testid="loader"
      />
      <button onClick={() => setLoading(!loading)}>
        Toggle Loading
      </button>
    </div>
  );
}

Architecture

React Spinners is built around several key design principles:

  • Consistent API: All components share common props for color, loading state, and styling
  • TypeScript-First: Full type safety with comprehensive prop interfaces
  • CSS-in-JS: No external stylesheets required, all styling is inline with dynamic keyframe generation
  • Conditional Rendering: Components return null when loading={false} for easy show/hide control
  • Accessibility Ready: Full support for ARIA attributes and semantic HTML
  • Server-Side Rendering: Compatible with Next.js and other SSR frameworks

Common Props

All spinner components accept these shared properties:

interface CommonProps {
  /** Controls spinner visibility, returns null when false */
  loading?: boolean;
  /** Spinner color as hex, RGB, RGBA, or named color */
  color?: string;
  /** Custom CSS styles applied to spinner container */
  cssOverride?: CSSProperties;
  /** Speed multiplier for animation (1 = normal, 0.5 = half speed, 2 = double speed) */
  speedMultiplier?: number;
  /** All standard HTML span element attributes are supported */
  [key: string]: any;
}

Capabilities

Circular and Ring Spinners

Circular loading indicators with various animation patterns, perfect for general loading states and button spinners.

// Circular spinners with size-based props
interface LoaderSizeProps extends CommonProps {
  size?: LengthType;
}

function ClipLoader(props: LoaderSizeProps): JSX.Element | null;
function CircleLoader(props: LoaderSizeProps): JSX.Element | null;
function ClockLoader(props: LoaderSizeProps): JSX.Element | null;
function RingLoader(props: LoaderSizeProps): JSX.Element | null;
function BounceLoader(props: LoaderSizeProps): JSX.Element | null;
function PuffLoader(props: LoaderSizeProps): JSX.Element | null;
function SquareLoader(props: LoaderSizeProps): JSX.Element | null;
function SkewLoader(props: LoaderSizeProps): JSX.Element | null;
function MoonLoader(props: LoaderSizeProps): JSX.Element | null;
function HashLoader(props: LoaderSizeProps): JSX.Element | null;
function DotLoader(props: LoaderSizeProps): JSX.Element | null;

Circular Spinners

Dot and Beat Spinners

Multi-dot animations with configurable spacing, ideal for subtle loading indicators and inline progress display.

// Dot-based spinners with size and margin props
interface LoaderSizeMarginProps extends CommonProps {
  size?: LengthType;
  margin?: LengthType;
}

function BeatLoader(props: LoaderSizeMarginProps): JSX.Element | null;
function PulseLoader(props: LoaderSizeMarginProps): JSX.Element | null;
function SyncLoader(props: LoaderSizeMarginProps): JSX.Element | null;
function RiseLoader(props: LoaderSizeMarginProps): JSX.Element | null;
function RotateLoader(props: LoaderSizeMarginProps): JSX.Element | null;
function GridLoader(props: LoaderSizeMarginProps): JSX.Element | null;

Dot and Beat Spinners

Bar and Linear Spinners

Linear progress indicators and bar animations, perfect for form submissions and content loading states.

// Height/width-based spinners
interface LoaderHeightWidthProps extends CommonProps {
  height?: LengthType;
  width?: LengthType;
}

function BarLoader(props: LoaderHeightWidthProps): JSX.Element | null;

// Bar spinners with radius and margin control  
interface LoaderHeightWidthRadiusProps extends CommonProps {
  height?: LengthType;
  width?: LengthType;
  radius?: LengthType;
  margin?: LengthType;
}

function FadeLoader(props: LoaderHeightWidthRadiusProps): JSX.Element | null;

Bar and Linear Spinners

Specialty and Themed Spinners

Unique animations with distinctive visual styles, great for branded loading experiences and specific use cases.

function PacmanLoader(props: LoaderSizeMarginProps): JSX.Element | null;
function ClimbingBoxLoader(props: LoaderSizeProps): JSX.Element | null;
function PropagateLoader(props: LoaderSizeProps): JSX.Element | null;

// ScaleLoader with configurable bar count
interface ScaleLoaderProps extends LoaderHeightWidthRadiusProps {
  barCount?: number;
}

function ScaleLoader(props: ScaleLoaderProps): JSX.Element | null;

Specialty Spinners

Types

// Base length type for all size-related props
type LengthType = number | string;

// Base props extended by all spinner components
interface CommonProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
  loading?: boolean;
  color?: string;
  cssOverride?: CSSProperties;
  speedMultiplier?: number;
}

// Prop interfaces for different spinner categories
interface LoaderSizeProps extends CommonProps {
  size?: LengthType;
}

interface LoaderSizeMarginProps extends CommonProps {
  size?: LengthType;
  margin?: LengthType;
}

interface LoaderHeightWidthProps extends CommonProps {
  height?: LengthType;
  width?: LengthType;
}

interface LoaderHeightWidthRadiusProps extends CommonProps {
  height?: LengthType;
  width?: LengthType;
  radius?: LengthType;
  margin?: LengthType;
}