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

# Loader

> Animated loading spinner

export const PreviewLoader = ({size = 'md'}) => {
  const sizes = {
    sm: 16,
    md: 20,
    lg: 24
  };
  return <svg className="sh-loader" style={{
    width: sizes[size],
    height: sizes[size]
  }} fill="none" viewBox="0 0 24 24">
      <circle style={{
    opacity: 0.25
  }} cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
      <path style={{
    opacity: 0.75
  }} fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
    </svg>;
};

export const ComponentPreview = ({children, className = '', centered = true}) => {
  return <div className={`sh-preview ${className}`}>
      <div className={`sh-preview-content ${centered ? 'flex items-center justify-center' : ''}`}>
        {children}
      </div>
    </div>;
};

The Loader component displays an animated spinning indicator for loading states.

## Preview

<ComponentPreview>
  <PreviewLoader />
</ComponentPreview>

## Usage

```blade theme={null}
<x-shopper::loader class="size-5" />
```

## Attributes

The loader accepts standard HTML attributes that are merged with Tailwind classes:

<ParamField path="class" type="string" default="size-5 animate-spin">
  CSS classes to customize size and animation. Common sizes: `size-4`, `size-5`, `size-6`.
</ParamField>

## Examples

### Different Sizes

<ComponentPreview>
  <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
    <PreviewLoader size="sm" />

    <PreviewLoader size="md" />

    <PreviewLoader size="lg" />
  </div>
</ComponentPreview>

```blade theme={null}
<x-shopper::loader class="size-4" />
<x-shopper::loader class="size-5" />
<x-shopper::loader class="size-6" />
```

### With Color

```blade theme={null}
<x-shopper::loader class="size-5 text-primary-500" />
<x-shopper::loader class="size-5 text-gray-400" />
```

### In a Button

```blade theme={null}
<x-filament::button wire:loading.attr="disabled">
    <x-shopper::loader wire:loading class="size-4 mr-2" />
    <span wire:loading.remove>Save</span>
    <span wire:loading>Saving...</span>
</x-filament::button>
```

### Loading State

```blade theme={null}
<div wire:loading.flex class="items-center justify-center py-8">
    <x-shopper::loader class="size-8 text-primary-500" />
</div>
```

## Blade Component Source

```blade theme={null}
<svg
    {{ $attributes->twMerge(['class' => 'size-5 animate-spin']) }}
    fill="none"
    viewBox="0 0 24 24"
    aria-hidden="true"
>
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
    <path
        class="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    />
</svg>
```