# Spinner An indicator that can be used to show a loading state. ```svelte

Processing payment... $100.00

``` ## Installation ```bash pnpm dlx shadcn-svelte@latest add spinner ``` ```bash npx shadcn-svelte@latest add spinner ``` ```bash bun x shadcn-svelte@latest add spinner ``` ## Usage ```svelte ``` ## Customization You can replace the default spinner icon with any other icon by editing the Spinner component. ```svelte ``` ## Examples ### Size Use the `size-*` utility class to change the size of the spinner. ```svelte

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

``` ### Button Add a spinner to a button to indicate a loading state. The ` ``` ### Badge You can also use a spinner inside a badge. ```svelte

Syncing Updating Processing

``` ### Input Group Input Group can have spinners inside ``. ```svelte

Validating...

``` ### Empty ```svelte Processing your request Please wait while we process your request. Do not refresh the page. ``` ### Item Use the spinner inside `` to indicate a loading state. ```svelte

Downloading... 129 MB / 1000 MB

```