Spinner
A ring that turns while something loads, with visible text beside it or a label read aloud instead. It pulses rather than turning under reduced motion.
Sizes and text
Small, medium and large; visible text is the label, and label: false makes the ring decorative for a control that already says what is happening.
Loading…
Loading…
Loading…
Checking DNS…
<div class="flex flex-wrap items-center gap-6">
<%= spinner size: :small %>
<%= spinner %>
<%= spinner size: :large %>
<%= spinner "Checking DNS…", size: :small %>
<button type="button" class="<%= button_classes %>" disabled><%= spinner size: :small, label: false %> Verifying</button>
</div>