Spinner

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

Sections
- Basics
- Size
- Color
- Position

# Basics

Using the moonshine::spinner component, you can create loading indicators

<x-moonshine::spinner />

<x-moonshine::spinner />

# 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:

Purple Pink Blue Green Yellow Red Gray

<x-moonshine::spinner color="purple" />
<x-moonshine::spinner color="pink" />
<x-moonshine::spinner color="blue" />
<x-moonshine::spinner color="green" />
<x-moonshine::spinner color="yellow" />
<x-moonshine::spinner color="red" />
<x-moonshine::spinner color="gray" />

<x-moonshine::spinner color="purple" />
<x-moonshine::spinner color="pink" />
<x-moonshine::spinner color="blue" />
<x-moonshine::spinner color="green" />
<x-moonshine::spinner color="yellow" />
<x-moonshine::spinner color="red" />
<x-moonshine::spinner color="gray" />

# Position

The absolute="true" parameter sets the absolute position of the loading indicator

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

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

The fixed="true" parameter specifies a fixed positioning of the loading indicator

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

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