Gridora: Animated Grid Loaders for React

Description:

Gridora is a React loading component that generates animated grid loaders with motion variants, per-cell effects, custom shapes, color ramps, and bitmap text.

It currently comes with more than 130 variants, 20 effects, 12 dot shapes, and CSS-driven output for React 1applications.

Features

• 130+ motion and glyph variants.
• 20 per-dot animation effects.
• 12 dot shapes, including circles, stars, rings, and bars.
• Horizontal, vertical, diagonal, radial, angular, random, and cycling color maps.
• Resolution-independent grids from 2 by 2 through 12 by 12 cells.
• CSS-driven animation with client injection or static stylesheet output.
• Accessible status markup with labels and reduced-motion control.
• Bitmap text loaders plus custom cell sequences.

How To Use It

Install the package

Install gridora with the package manager.

# Install the React loader package.
npm install gridora
# pnpm and Bun are supported too.
# pnpm add gridora
# bun add gridora

Render a built-in variant

Import GridLoader and choose a registered variant:

import { GridLoader } from "gridora";
export function BuildStatus() {
  return (
    <div aria-live="polite">
      {/* Orbit is a radial variant from the public registry. */}
      <GridLoader variant="orbit" label="Preparing build" />
    </div>
  );
}

Tune the grid, colors, and effect

Configure the loader with a variant, grid size, color ramp, mapping mode, shape, and effect:

import { GridLoader } from "gridora";
export function UploadProgress() {
  return (
    <GridLoader
      variant="ripple"
      gridSize={7}
      cellSize={6}
      gap={2}
      speed={1.2}
      colors={["#0F766E", "#14B8A6", "#99F6E4"]}
      colorMode="radial"
      effect="glow"
      shape="diamond"
      glow={4}
      label="Uploading files"
    />
  );
}

Draw text with GridLoaderText

GridLoaderText maps supported characters to bitmap masks and renders one grid loader per glyph:

import { GridLoaderText } from "gridora";
export function SyncMessage() {
  return (
    <GridLoaderText
      text="SYNC"
      effect="pulse"
      color="#F8FAFC"
      letterGap={7}
      label="Synchronizing data"
    />
  );
}

Create a custom cell sequence

Pass ordered cell indices to replace a built-in phase pattern. The index uses row * gridSize + col:

import { GridLoader } from "gridora";
export function RouteSignal() {
  return (
    <GridLoader
      gridSize={5}
      sequence={[0, 1, 2, 7, 12, 17, 22]}
      effect="bounce"
      inactive="hidden"
      colors={["#F97316", "#FACC15"]}
      colorMode="cycle"
      label="Routing request"
    />
  );
}

Use a static stylesheet

Import the package stylesheet when the app needs stylesheet output that loads before client hydration or fits a strict CSP policy:

// Place this import in the app's global CSS entry or root layout.
import "gridora/styles.css";
import { GridLoader } from "gridora";
export function StaticStylesLoader() {
  return <GridLoader variant="compile" label="Compiling source" />;
}

All Component Props

GridLoaderText props

Helpers and Low-Level Exports

Use the public registries when a settings panel, loader picker, or custom editor needs the package’s available values:

import {
  GRID_LOADER_EFFECTS,
  GRID_LOADER_SHAPES,
  GRID_LOADER_VARIANT_NAMES,
  sequenceToPhases,
} from "gridora";
// Build select menus from the exported registry values.
const effectOptions = GRID_LOADER_EFFECTS;
const shapeOptions = GRID_LOADER_SHAPES;
const variantOptions = GRID_LOADER_VARIANT_NAMES;
// Convert ordered cell indices into per-cell animation phases.
const phases = sequenceToPhases([0, 1, 5, 9], 3);

Alternatives and Related Resources

• 10 Best React Loading Spinner & Indicator Components for Web & Mobile

FAQs

Q: Does Gridora need a CSS import?

A: The component injects keyframes on the client. Import gridora/styles.css when the application needs static stylesheet output for server rendering or a strict CSP policy.

Q: Which React versions does the package support?

A: The package declares React >=18 as a peer dependency. react-dom is optional.

Q: How do I make a loader from an exact cell order?

A: Pass a sequence array of flat cell indices. Each index uses row * gridSize + col, and the sequence takes precedence over variant and mask.

Q: How do I create a text loader?

A: Import GridLoaderText, pass a string through text, and set the shared styling props such as effect, color, and cellSize. Unsupported characters render as gaps.

Q: Does reduced motion work by default?

A: The respectReducedMotion default is false. Set it to true when the loader should honor the user’s reduced-motion preference.