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" />