Spinner

Examples

Default

An indicator that can be used to show a loading state.

<%= render "ui/spinner" %>

<%= render UI::Spinner.new %>

<%= render UI::SpinnerComponent.new %>

Sizes

Available size variants.

<div class="flex items-center gap-6">
  <%= render "ui/spinner", size: "sm" %>
  <%= render "ui/spinner", size: "default" %>
  <%= render "ui/spinner", size: "lg" %>
  <%= render "ui/spinner", size: "xl" %>
</div>

<div class="flex items-center gap-6">
  <%= render UI::Spinner.new(size: "sm") %>
  <%= render UI::Spinner.new(size: "default") %>
  <%= render UI::Spinner.new(size: "lg") %>
  <%= render UI::Spinner.new(size: "xl") %>
</div>

<div class="flex items-center gap-6">
  <%= render UI::SpinnerComponent.new(size: "sm") %>
  <%= render UI::SpinnerComponent.new(size: "default") %>
  <%= render UI::SpinnerComponent.new(size: "lg") %>
  <%= render UI::SpinnerComponent.new(size: "xl") %>
</div>

In Button

Spinner used in a button loading state.

<%= render "ui/button", disabled: true do %>
  <%= render "ui/spinner", size: "sm" %>
  <span class="ml-2">Loading...</span>
<% end %>

<%= render UI::Button.new(disabled: true) do %>
  <%= render UI::Spinner.new(size: "sm") %>
  <span class="ml-2">Loading...</span>
<% end %>

<%= render UI::ButtonComponent.new(disabled: true) do %>
  <%= render UI::SpinnerComponent.new(size: "sm") %>
  <span class="ml-2">Loading...</span>
<% end %>

Features

Custom styling with Tailwind classes
ARIA attributes for accessibility

API Reference

A loading indicator component using an animated spinner icon.

Parameters

Name	Type	Default	Description
size	String	default	Size of the element