Spinner

Indicate an action is running in the background after an action by the user.

Usage

<x-spinner />

Component API

Attribute Default Description
size default string
Possible values default, sm, or lg.
style primary string
Possible values primary, success, info, warning or danger.

Size

Control the spinner size by supplying the size="" attribute.

<div class="flex items-start justify-center gap-8 max-md:flex-col">
    <x-spinner size="sm" />
    <x-spinner />
    <x-spinner size="lg" />
</div>

Style

Control the spinner style by supplying the style="" attribute.

<div class="flex items-start justify-center gap-8 max-md:flex-col">
    <x-spinner />
    <x-spinner style="success" />
    <x-spinner style="info" />
    <x-spinner style="warning" />
    <x-spinner style="danger" />
</div>