@aristobyte-ui/spinner

A modular, highly customizable React spinner component, optimized for AristoByteUI projects. Supports multiple animation types, semantic color variants, and flexible sizing.

📦 Installation

``bash


Install via Yarn

yarn add -D @aristobyte-ui/spinner

Or via npm

npm install -D @aristobyte-ui/spinner

Or via pnpm

pnpm add -D @aristobyte-ui/spinner
`

🛠 Usage

`tsx
import { Spinner } from '@aristobyte-ui/spinner';

export const Demo = () => (



);
`

| Prop | Type | Default | Description |
| | - | -- | -- |
| type | "default", "duo", "gradient", "pulse", "pulse-duo" | "default" | Defines the spinner animation style |
| variant | "default", "primary", "secondary", "success", "error", "warning" | "default" | Semantic color variant |
| size | "xsm", "sm", "md", "lg", "xlg" | "md" | Controls spinner dimensions |
| className | string | "" | Optional additional class names |

📂 Presets Available

- Types: default, duo, gradient, pulse, pulse-duo
- Variants: default, primary, secondary, success, error, warning
- Sizes: xsm, sm, md, lg, xlg

🔧 Example in a Package

`tsx
import { Spinner } from '@aristobyte-ui/spinner';

export const LoadingState = () => (



);
``

📊 Why This Matters

- Performance-first: Engineered with lightweight, GPU-accelerated CSS keyframes for smooth, non-blocking animations.
- Fully typed: TypeScript-first API ensures strict type safety and predictable integration across multiple projects.
- AristoByteUI ready: Fully interoperable with AristoByte’s design tokens, semantic color palette, and styling architecture.
- Flexible: Supports multiple animation types, semantic variants, and responsive sizing to fit any UI scenario.

🏆 Philosophy

- Modular architecture: Components are built for maximum reusability and composability.
- Declarative styling: SCSS modules maintain a clean separation of concerns while leveraging design tokens.
- Strict typing & runtime flexibility: Type-safe props with optional runtime overrides.
- Developer experience optimized: Intuitive API with predictable behavior and minimal setup.

📜 License

MIT © AristoByte

🛡 Shields Showcase