IDEO Loader

A modern, accessible React component library featuring IDEO-style loading animations.

Installation

npm install ideo-loader
# or
yarn add ideo-loader

Components

IdeoLoader

A static loader component that displays animated "IDEO" letters.

import { IdeoLoader } from "ideo-loader";

function App() {
  return (
    <div>
      <h1>Loading Example</h1>
      <IdeoLoader />
    </div>
  );
}

Props

Prop	Type	Default	Description
size	"small" | "medium" | "large"	"medium"	Size of the loader
className	string	""	Additional CSS class for the loader
ariaLabel	string	"Loading"	ARIA label for accessibility
tileColor	string	"black"	Background color of the tiles
textColor	string	"white"	Color of the text in the tiles

IdeoLoaderCursor

A cursor-following loader component. When active, it replaces the cursor with animated "IDEO" letters.

import { IdeoLoaderCursor } from "ideo-loader";

function LoadingPage() {
  return (
    <div>
      <h1>Loading Content...</h1>
      <IdeoLoaderCursor isLoading={true} />
    </div>
  );
}

Props

Prop	Type	Default	Description
isLoading	boolean	false	Whether the loader is active
ariaLabel	string	"Loading cursor"	ARIA label for accessibility
tileColor	string	"black"	Background color of the tiles
textColor	string	"white"	Color of the text in the tiles
minSize	number	25	Minimum size of the loader container
maxSize	number	38	Maximum size of the loader container
tileSize	number	14	Size of the tiles
fontSize	number	8	Font size of the text in the tiles

Accessibility

Both components include proper ARIA attributes for accessibility:

• role="status" to indicate that the component represents a status
• aria-label to provide a text description of the loader
• aria-live="polite" to announce changes to the loader

License

MIT