Spinner

Spinner component for loading indicators.

Usage

<%= ui.spinner %>
<%= ui.spinner size: 8 %>
<%= ui.spinner size: 10, class: "text-blue-500" %>
Props
PropTypeDefaultDescription
sizeInteger6Size of the spinner in spacing units. Passed to the underlying icon component.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.

Examples

Default

<%= ui.spinner %>

Different sizes

<%= ui.spinner size: 4 %>
<%= ui.spinner size: 6 %>
<%= ui.spinner size: 8 %>
<%= ui.spinner size: 10 %>

With custom class

<%= ui.spinner size: 6, class: "text-blue-500" %>

With Turbo Frame

<%= turbo_frame_tag "loading_frame", spinner: true, busy: true, class: "flex flex-col h-40" do %>

<% end %>