UI Components

Spinner

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

# Basic usage

<x-spinner />
<x-spinner secondary />
<x-spinner slate />
<x-spinner zinc />
<x-spinner gray />
<x-spinner neutral />
<x-spinner stone />
<x-spinner red />
<x-spinner orange />
<x-spinner amber />
<x-spinner yellow />
<x-spinner lime />
<x-spinner green />
<x-spinner emerald />
<x-spinner teal />
<x-spinner cyan />
<x-spinner sky />
<x-spinner blue />
<x-spinner Indigo />
<x-spinner violet />
<x-spinner purple />
<x-spinner fuchsia />
<x-spinner pink />
<x-spinner rose />
<x-spinner black />
<x-spinner white />

# Size variants

<x-spinner xs />
<x-spinner sm />
<x-spinner md /> {{-- default --}}
<x-spinner lg />
<x-spinner xl />

# Spinner dots

<x-spinner dots />
<x-spinner secondary dots />
<x-spinner slate dots />
<x-spinner zinc dots />
<x-spinner gray dots />
<x-spinner neutral dots />
<x-spinner stone dots />
<x-spinner red dots />
<x-spinner orange dots />
<x-spinner amber dots />
<x-spinner yellow dots />
<x-spinner lime dots />
<x-spinner green dots />
<x-spinner emerald dots />
<x-spinner teal dots />
<x-spinner cyan dots />
<x-spinner sky dots />
<x-spinner blue dots />
<x-spinner Indigo dots />
<x-spinner violet dots />
<x-spinner purple dots />
<x-spinner fuchsia dots />
<x-spinner pink dots />
<x-spinner rose dots />
<x-spinner black dots />
<x-spinner white dots />

# Spinner bars

<x-spinner bars />
<x-spinner secondary bars />
<x-spinner slate bars />
<x-spinner zinc bars />
<x-spinner gray bars />
<x-spinner neutral bars />
<x-spinner stone bars />
<x-spinner red bars />
<x-spinner orange bars />
<x-spinner amber bars />
<x-spinner yellow bars />
<x-spinner lime bars />
<x-spinner green bars />
<x-spinner emerald bars />
<x-spinner teal bars />
<x-spinner cyan bars />
<x-spinner sky bars />
<x-spinner blue bars />
<x-spinner Indigo bars />
<x-spinner violet bars />
<x-spinner purple bars />
<x-spinner fuchsia bars />
<x-spinner pink bars />
<x-spinner rose bars />
<x-spinner black bars />
<x-spinner white bars />

# Spinner pulse

<x-spinner pulse />
<x-spinner secondary pulse />
<x-spinner slate pulse />
<x-spinner zinc pulse />
<x-spinner gray pulse />
<x-spinner neutral pulse />
<x-spinner stone pulse />
<x-spinner red pulse />
<x-spinner orange pulse />
<x-spinner amber pulse />
<x-spinner yellow pulse />
<x-spinner lime pulse />
<x-spinner green pulse />
<x-spinner emerald pulse />
<x-spinner teal pulse />
<x-spinner cyan pulse />
<x-spinner sky pulse />
<x-spinner blue pulse />
<x-spinner Indigo pulse />
<x-spinner violet pulse />
<x-spinner purple pulse />
<x-spinner fuchsia pulse />
<x-spinner pink pulse />
<x-spinner rose pulse />
<x-spinner black pulse />
<x-spinner white pulse />

# Customize spinner

You can easily customize any spinner using standard css classes.
<x-spinner class="text-blue-400 size-10" />
Code highlighting powered by Torchlight