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