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

# Spinner

> Spinner.vue Component Documentation

The `Spinner.vue` component is a simple, reusable Vue.js component designed to display a spinner or loader. It supports customizable sizes and types, allowing for versatile use in various application contexts.

***

## Features

<CardGroup cols={2}>
  <Card title="Customizable Size" icon="square-1">
    Adjust the spinner size dynamically using the <code>size</code> prop.
  </Card>

  <Card title="Spinner Types" icon="square-2">
    Switch between different spinner styles (<code>x</code> or default) with the <code>type</code> prop.
  </Card>

  <Card title="Lightweight Design" icon="square-3">
    Features minimal configuration for easy and straightforward usage.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```js theme={null}
import { Spinner } from '@robojuice/velure-ui';
```

```vue theme={null}
<Spinner size="16" />
```

### Custom Type Spinner

```vue theme={null}
<Spinner type="x" />
```

### Combined Size and Type

```vue theme={null}
<Spinner size="16" type="x" />
```

***

## Props

<ParamField path="type" type="string" default="'c'">
  The type of spinner. Supported values: `'c'` (default), `'x'`.
</ParamField>

<ParamField path="size" type="number" default="16">
  The size of the spinner in pixels.
</ParamField>

***

## Example Use Cases

### Small Spinner

```vue theme={null}
<Spinner size="12" />
```

### Custom Type Spinner

Switch the spinner to an "x" style:

```vue theme={null}
<Spinner type="x" />
```

### Custom Size and Type Spinner

Combine size and type for a tailored spinner:

```vue theme={null}
<Spinner size="24" type="x" />
```

***

## Notes

* The `type` prop determines the style of the spinner. By default, it uses a circular style (`'c'`), but you can switch to an `'x'` style.
* The `size` prop allows precise control of the spinner's dimensions, making it adaptable for various UI designs.

For further customization, refer to the component's source code.