Package Exports

@arnonsang/react-loading
@arnonsang/react-loading/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@arnonsang/react-loading) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@arnonsang/react-loading

A highly customizable and lightweight React loading component library that provides multiple loading animations and variants for your React applications.

Installation

npm i @arnonsang/react-loading
# or
yarn add @arnonsang/react-loading
# or
pnpm add @arnonsang/react-loading
# or
bun add @arnonsang/react-loading

Features

🎨 Multiple loading variants (spinner, dots, pulse, skeleton, and more)
📐 Customizable sizes and colors
🎯 TypeScript support
🪶 Lightweight and zero dependencies
📱 Responsive and accessible
🔧 Easy to customize and extend

Usage

import Loading from '@arnonsang/react-loading';

// Basic usage
function MyComponent() {
  return <Loading />;
}

// With custom props
function CustomLoadingExample() {
  return (
    <Loading
      variant="spinner"
      size="md"
      themeColor="blue"
      text="Please wait..."
    />
  );
}

Props

Prop	Type	Default	Description
`variant`	`string`	`"spinner"`	Loading animation variant. Available options: `"spinner"`, `"dots"`, `"pulse"`, `"skeleton"`, `"blank"`, `"bars"`, `"bubbles"`, `"cylon"`, `"spinningBubbles"`, `"ripple"`, `"wave"`, `"orbit"`, `"bounce"`, `"snake"`, `"grid"`, `"heart"`, `"spiral"`
`size`	`string`	`"md"`	Size of the loading animation. Options: `"sm"`, `"md"`, `"lg"`
`themeColor`	`string`	`"blue"`	Predefined color theme. Options: `"red"`, `"blue"`, `"green"`, `"yellow"`, `"purple"`, `"pink"`, `"gray"`
`color`	`string`	`"#ffffff"`	Custom color for the loading animation
`width`	`number \| string`	-	Custom width of the loading container
`height`	`number \| string`	-	Custom height of the loading container
`delay`	`number`	`0`	Delay before the animation starts (in milliseconds)
`text`	`string`	`"Loading..."`	Loading text to display
`fullPage`	`boolean`	`false`	Whether to display the loading in full page mode
`hideText`	`boolean`	`false`	Whether to hide the loading text
`className`	`string`	`""`	Additional CSS class names

Variants

Basic Variants

spinner: Classic rotating spinner
dots: Three bouncing dots
pulse: Pulsing circle
skeleton: Skeleton loading placeholder

Advanced Variants

bars: Animated loading bars
bubbles: Floating bubbles
cylon: Scanning animation
spinningBubbles: Rotating bubble pattern
blank: Empty placeholder

New Variants

ripple: Expanding ripple effect
wave: Wave motion animation
orbit: Orbiting dots around center
bounce: Bouncing ball with shadow
snake: Snake-like moving segments
grid: Animated grid of squares
heart: Heartbeat pulse animation
spiral: Spiral rotating dots

Examples

// Spinner with custom color
<Loading variant="spinner" color="#FF5733" />

// Full-page loading
<Loading variant="dots" fullPage={true} />

// Custom size and themed loading
<Loading
  variant="pulse"
  size="lg"
  themeColor="purple"
  text="Processing..."
/>

// Skeleton loading
<Loading variant="skeleton" width={200} height={100} />

// Delayed animation
<Loading variant="spinningBubbles" delay={500} />

// New variants examples
<Loading variant="ripple" size="lg" color="#e91e63" />
<Loading variant="wave" themeColor="purple" />
<Loading variant="orbit" width={60} height={60} />
<Loading variant="bounce" color="#ff9800" />
<Loading variant="snake" size="md" themeColor="green" />
<Loading variant="grid" width={80} height={80} />
<Loading variant="heart" color="#f44336" />
<Loading variant="spiral" delay={200} />

TypeScript Support

This package includes TypeScript definitions. You can import types directly:

import { LoadingProps } from '@arnonsang/react-loading';

Browser Support

The loading animations are supported in all modern browsers:

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.