Components

Spinner

Basics

The Spinner component allows you to create a loading indicator.

make(
    string $size = 'sm',
    string|Color $color = '',
    bool $fixed = false,
    bool $absolute = false,
)
make(
    string $size = 'sm',
    string|Color $color = '',
    bool $fixed = false,
    bool $absolute = false,
)
  • $size - size,
  • $color - color,
  • $fixed - fixed position,
  • $absolute - absolute position.
use MoonShine\UI\Components\Spinner;
 
Spinner::make()
use MoonShine\UI\Components\Spinner;
 
Spinner::make()
<x-moonshine::spinner size="md" />
<x-moonshine::spinner size="md" />

Size

Available sizes:

  • sm
  • md
  • lg
  • xl
<x-moonshine::spinner size="sm" />
<x-moonshine::spinner size="md" />
<x-moonshine::spinner size="lg" />
<x-moonshine::spinner size="xl" />
<x-moonshine::spinner size="sm" />
<x-moonshine::spinner size="md" />
<x-moonshine::spinner size="lg" />
<x-moonshine::spinner size="xl" />

Color

Available colors:

  • primary
  • secondary
  • success
  • warning
  • error
  • info
<x-moonshine::spinner color="primary" />
<x-moonshine::spinner color="secondary" />
<x-moonshine::spinner color="success" />
<x-moonshine::spinner color="warning" />
<x-moonshine::spinner color="error" />
<x-moonshine::spinner color="info" />
<x-moonshine::spinner color="primary" />
<x-moonshine::spinner color="secondary" />
<x-moonshine::spinner color="success" />
<x-moonshine::spinner color="warning" />
<x-moonshine::spinner color="error" />
<x-moonshine::spinner color="info" />

Positioning

The parameter absolute="true" sets the absolute positioning of the loading indicator.

<x-moonshine::spinner :absolute="true" />
<x-moonshine::spinner :absolute="true" />

The parameter fixed="true" sets the fixed positioning of the loading indicator.

<x-moonshine::spinner :fixed="true" />
<x-moonshine::spinner :fixed="true" />