shadcn-rails

Spinner

A loading spinner animation for indicating loading states.

No JavaScript Required
spinner/default 
<%= render Shadcn::SpinnerComponent.new %>

Installation

Add the component to your project:

rails generate shadcn:add spinner

Usage

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

Examples

Sizes

<%= render Shadcn::SpinnerComponent.new(size: :sm) %>
<%= render Shadcn::SpinnerComponent.new(size: :default) %>
<%= render Shadcn::SpinnerComponent.new(size: :lg) %>
<%= render Shadcn::SpinnerComponent.new(size: :xl) %>

With Button

<%= render Shadcn::ButtonComponent.new(disabled: true) do %>
  <%= render Shadcn::SpinnerComponent.new(size: :sm, class_name: "mr-2") %>
  Loading...
<% end %>

Custom Color

<%= render Shadcn::SpinnerComponent.new(class_name: "text-primary") %>
<%= render Shadcn::SpinnerComponent.new(class_name: "text-destructive") %>
<%= render Shadcn::SpinnerComponent.new(class_name: "text-blue-500") %>

Loading State

Loading content... 
<div class="flex flex-col items-center gap-2">
  <%= render Shadcn::SpinnerComponent.new(size: :lg) %>
  <span class="text-sm text-muted-foreground">Loading content...</span>
</div>

API Reference

API Reference

Prop Type Default Description
size Symbol :default Spinner size (:sm, :default, :lg, :xl)
class_name String nil Additional CSS classes to apply

Accessibility

  • Includes role="status" to indicate loading state
  • Has aria-label="Loading" for screen readers
  • Consider adding descriptive text for context when using in loading states