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

# Spinner

> An indicator that can be used to show a loading state.

## Installation

<Tabs>
  <Tab title="CLI">
    ```bash theme={null}
    npx shadcn-svelte@next add spinner
    ```
  </Tab>

  <Tab title="Manual">
    <Steps>
      <Step title="Install @lucide/svelte">
        ```bash theme={null}
        npm install @lucide/svelte -D
        ```
      </Step>

      <Step title="Copy and paste the component source">
        Copy and paste the component source code into your project.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Usage

```svelte theme={null}
<script lang="ts">
  import { Spinner } from "$lib/components/ui/spinner/index.js";
</script>
```

```svelte theme={null}
<Spinner />
```

## Customization

You can replace the default spinner icon with any other icon by editing the `Spinner` component.

## Examples

### Size

Use the `size-*` utility class to change the size of the spinner.

### Color

Use the `text-*` utility class to change the color of the spinner.

### Button

Add a spinner to a button to indicate a loading state. The `<Button />` will handle the spacing between the spinner and the text.

### Badge

You can also use a spinner inside a badge.

### Input Group

Input Group can have spinners inside `<InputGroup.Addon>`.

### Empty

Use spinner in empty states to indicate loading.

### Item

Use the spinner inside `<Item.Media>` to indicate a loading state.

## Links

* [Source](https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/spinner)