react-spinning-cat

Install

npm install react-spinning-cat

Usage

Full-page loader

import { Loader } from "react-spinning-cat";

function LoadingPage() {
  return <Loader />;
}

Inline spinner

import { Spinner } from "react-spinning-cat";

function SaveButton({ saving }: { saving: boolean }) {
  return (
    <button>
      {saving && <Spinner size={14} />}
      Save
    </button>
  );
}

Components

<Loader />

Full-page loading screen with "Loading..." text.

| Prop | Type | Default | Description | | ----------- | --------------- | ----------- | ------------------------------------ | | text | string | "Loading" | Loading text displayed below the cat | | scale | number | 1 | Scale factor (1 = 110x88px) | | className | string | — | CSS class for the container | | style | CSSProperties | — | Inline styles for the container |

<Spinner />

Inline spinner for compact loading states.

| Prop | Type | Default | Description | | ----------- | --------------- | ------- | --------------------------------- | | size | number | 16 | Spinner size in pixels | | className | string | — | CSS class for the img element | | style | CSSProperties | — | Inline styles for the img element |

License

MIT