Spinner

UI::Spinner

A loading indicator.

bin/rails generate velvetkit:add spinner

Also adds: Icon
Stimulus: None, it's server-rendered
Installs: Nothing

Examples

All Sizes

sizes.html.erb

<div class="flex items-end gap-4">
  <%= render(UI::Spinner.new(size: :xs)) %>
  <%= 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>

In Buttons

in_buttons.html.erb

<div class="flex flex-wrap items-center gap-3">
  <%= render(UI::Button.new(loading: true, size: :sm))      { "Saving" } %>
  <%= render(UI::Button.new(loading: true))                 { "Saving" } %>
  <%= render(UI::Button.new(loading: true, size: :lg))      { "Saving" } %>
  <%= render(UI::Button.new(loading: true, variant: :destructive)) { "Deleting" } %>
  <%= render(UI::Button.new(loading: true, variant: :outline))     { "Loading" } %>
</div>

API

Arguments

UI::Spinner.new(size: :default, label: nil, class: nil, **html_attrs)