> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Spinner

> Loading spinner component with determinate and indeterminate modes

export const SpinnerDeterminatePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/SpinnerDeterminate" frameBorder="0" width="100%" height="260"></iframe>;

export const SpinnerWithLabelPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/SpinnerWithLabel" frameBorder="0" width="100%" height="260"></iframe>;

export const SpinnerSizesPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/SpinnerSizes" frameBorder="0" width="100%" height="260"></iframe>;

export const SpinnerBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/SpinnerBasic" frameBorder="0" width="100%" height="260"></iframe>;

## Overview

The Spinner component displays loading indicators with support for determinate (with progress) and indeterminate modes, multiple sizes, and label placement.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Spinner } from '@peppermint-design/devreadykit-custom';

    export default function SpinnerBasic() {
      return <Spinner />;
    }
    ```
  </Tab>

  <Tab title="Preview">
    <SpinnerBasicPreview />
  </Tab>
</Tabs>

## Sizes

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Spinner } from '@peppermint-design/devreadykit-custom';

    <Spinner size="sm" />
    <Spinner size="md" />
    <Spinner size="lg" />
    ```
  </Tab>

  <Tab title="Preview">
    <SpinnerSizesPreview />
  </Tab>
</Tabs>

## With Label

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Spinner } from '@peppermint-design/devreadykit-custom';

    <Spinner label="Loading..." />
    <Spinner label="Processing" labelPlacement="bottom" />
    ```
  </Tab>

  <Tab title="Preview">
    <SpinnerWithLabelPreview />
  </Tab>
</Tabs>

## Determinate (With Progress)

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Spinner } from '@peppermint-design/devreadykit-custom';

    <Spinner progress={50} label="50%" />
    <Spinner progress={75} label="75%" size="lg" />
    ```
  </Tab>

  <Tab title="Preview">
    <SpinnerDeterminatePreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  | Prop           | Type                   | Default   | Description                                      |
  | :------------- | :--------------------- | :-------- | :----------------------------------------------- |
  | size           | `"sm" \| "md" \| "lg"` | `"md"`    | Spinner size                                     |
  | label          | `string`               | -         | Loading label text                               |
  | labelPlacement | `"right" \| "bottom"`  | `"right"` | Label position                                   |
  | progress       | `number`               | -         | Progress percentage (0-100) for determinate mode |
  | className      | `string`               | -         | Additional CSS classes                           |
</PropsTable>