Spinners - Hotwire Edition

Loading spinners with Stimulus, Turbo & Hotwire integration

← Back to Home

Basic Spinners

Simple loading indicators in different sizes and colors

Sizes

Colors

<%= spinner_component(variant: :primary, size: :md) %>
<%= spinner_component(variant: :success, size: :lg) %>

Spinner Types

Different animation styles

Border (Default)

Dots

Bars

Pulse

<%= spinner_component(variant: :primary, size: :lg, type: :border) %>
<%= spinner_component(variant: :primary, size: :lg, type: :dots) %>
<%= spinner_component(variant: :primary, size: :lg, type: :bars) %>
<%= spinner_component(variant: :primary, size: :lg, type: :pulse) %>

Spinners with Text

Add context to your loading states

Loading...

Saving changes...

Processing your request

<%= spinner_component(variant: :primary, size: :md, text: "Loading...") %>

Overlay Spinners

Full-screen loading overlays

Content area with overlay spinner (click button to show)

<%= spinner_component(
  variant: :primary,
  size: :xl,
  overlay: true,
  text: "Loading content..."
) %>

Turbo Integration

Automatic spinner display during Turbo requests

Button with Turbo Stream

Click the button to trigger a Turbo Stream request with an automatic spinner:

Ready to process...

<%= form_with url: simulate_operation_path, method: :post, data: { turbo_stream: true } do |f| %>
  <%= spinner_component(
    variant: :primary,
    size: :lg,
    overlay: true,
    text: "Processing..."
  ) %>
  <%= f.button "Submit", type: "submit" %>
<% end %>

🌍 Real-World Use Cases

Practical spinner implementations

📝 Form Submission

Show spinner while form is submitting

🔘 Button Loading State

Inline spinner within buttons

<button class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md">
  <%= spinner_component(variant: :white, size: :sm) %>
  <span class="ml-2">Processing...</span>
</button>

📊 Data Table Loading

Loading state for data tables

Name Email Status
John Doe [email protected] Active