UI components

Spinner

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:

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 absolute="true" parameter specifies the absolute positioning 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" />