# Spinner

> Bootstrap's spinner component built with Svelte 5. Use it to indicate a loading state in your projects.

Source: https://bootstrap-svelte.vercel.app/components/spinner — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Basic Example

Bootstrap's spinners are designed to be used as loading indicators, primarily for asynchronous operations. The default style is a border spinner.

```html
<Spinner>
  <span class="visually-hidden">Loading...</span>
</Spinner>
```

## Growing Spinner

If you prefer a different style, you can use the growing spinner with the `type="grow"` prop.

```html
<Spinner type="grow">
  <span class="visually-hidden">Loading...</span>
</Spinner>
```

## Color Variants

Customize the spinner by using the `colorVariant` prop to match your project's color theme.

```html
<Spinner colorVariant="primary">
  <span class="visually-hidden">Loading primary...</span>
</Spinner>
<Spinner colorVariant="secondary">
  <span class="visually-hidden">Loading secondary...</span>
</Spinner>
<Spinner colorVariant="success">
  <span class="visually-hidden">Loading success...</span>
</Spinner>
<Spinner colorVariant="danger">
  <span class="visually-hidden">Loading danger...</span>
</Spinner>
<Spinner colorVariant="warning">
  <span class="visually-hidden">Loading warning...</span>
</Spinner>
<Spinner colorVariant="info">
  <span class="visually-hidden">Loading info...</span>
</Spinner>
<Spinner colorVariant="light">
  <span class="visually-hidden">Loading light...</span>
</Spinner>
<Spinner colorVariant="dark">
  <span class="visually-hidden">Loading dark...</span>
</Spinner>
```

## Growing Color Variants

The growing spinner also supports all color variants.

```html
<Spinner type="grow" colorVariant="primary">
  <span class="visually-hidden">Loading primary...</span>
</Spinner>
<Spinner type="grow" colorVariant="secondary">
  <span class="visually-hidden">Loading secondary...</span>
</Spinner>
<Spinner type="grow" colorVariant="success">
  <span class="visually-hidden">Loading success...</span>
</Spinner>
<Spinner type="grow" colorVariant="danger">
  <span class="visually-hidden">Loading danger...</span>
</Spinner>
<Spinner type="grow" colorVariant="warning">
  <span class="visually-hidden">Loading warning...</span>
</Spinner>
<Spinner type="grow" colorVariant="info">
  <span class="visually-hidden">Loading info...</span>
</Spinner>
<Spinner type="grow" colorVariant="light">
  <span class="visually-hidden">Loading light...</span>
</Spinner>
<Spinner type="grow" colorVariant="dark">
  <span class="visually-hidden">Loading dark...</span>
</Spinner>
```

## Placement

You can place the spinner in various locations within your layout. The spinner will automatically adjust its position based on the surrounding elements.

#### Flex

```html
<div class="d-flex justify-content-center">
    <Spinner>
        <span class="visually-hidden">Loading...</span>
    </Spinner>
</div>
```

```html
<div class="d-flex align-items-center">
    <strong role="status">Loading...</strong>
    <Spinner class="ms-auto"></Spinner>
</div>
```

#### Floats

```html
<div class="clearfix">
    <Spinner class="float-end">
        <span class="visually-hidden">Loading...</span>
    </Spinner>
</div>
```

#### Text align

```html
<div class="text-center">
    <Spinner>
        <span class="visually-hidden">Loading...</span>
    </Spinner>
</div>
```

## Sizing

You can use the `size` prop to make the spinner smaller. By default, the spinner uses the standard size. Set `size="sm"` for the small variant.

Or, use custom CSS or inline styles to change the dimensions as needed.

```html
<Spinner size="sm">
  <span class="visually-hidden">Loading...</span>
</Spinner>
<Spinner>
  <span class="visually-hidden">Loading...</span>
</Spinner>
<Spinner style="width: 3rem; height: 3rem;">
  <span class="visually-hidden">Loading...</span>
</Spinner>
```

## Button Spinners

Spinners can be used inside buttons to indicate an action is currently processing or taking place.

```html
<button class="btn btn-primary" type="button" disabled>
  <Spinner size="sm" colorVariant="light">
    <span class="visually-hidden">Loading...</span>
  </Spinner>
  Loading...
</button>
```

### Centered Button Spinner

You can also center the spinner in a button and add margin for better alignment:

```html
<button class="btn btn-primary" type="button" disabled>
  <Spinner size="sm" colorVariant="light">
    <span class="visually-hidden">Loading...</span>
  </Spinner>
  <span class="ms-2">Loading...</span>
</button>
```

### Growing Button Spinner

You can also use the growing spinner inside buttons:

```html
<button class="btn btn-primary" type="button" disabled>
  <Spinner size="sm" type="grow" colorVariant="light">
    <span class="visually-hidden">Loading...</span>
  </Spinner>
  <span class="ms-2">Loading...</span>
</button>
```

## API Reference

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | `undefined` | Additional CSS classes to apply to the component. |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | — | Unique identifier for the spinner. If not specified, it will be auto-generated. |
| `size` | `string` | — | Sets the spinner size. Values: 'sm' |
| `type` | `string` | `'border'` | Spinner type. Values: 'border', 'grow' |
| `colorVariant` | `string` | — | Sets the spinner's color. Values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark' |

### Accessibility

For improved accessibility, it's important to include screen reader text within the spinner to indicate its purpose. This can be done by adding a `<span class="visually-hidden">Loading...</span>` inside the Spinner component.

### CSS Classes

The component applies Bootstrap's spinner classes based on the provided props:

- `spinner-border` or `spinner-grow` - Applied as the base class depending on type
- `spinner-border-sm` or `spinner-grow-sm` - Applied when size="sm"
- `text-{variant}` - Applied based on the variant prop