LoopOS UI v1.1.29.0

Previews

No matching results.

x
1
2
3
<i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;">
  progress_activity
</i>

Spinner

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
<%= render LooposUi::Spinner.new(theme: params[:theme]&.to_sym || :dark, size: params[:size]&.to_sym || :default) %>

No notes provided.

Param Description Input

—

—

Description

Spinner is used to display a loading indicator with animated Lottie graphics. It provides visual feedback to users during asynchronous operations or when content is being loaded.

Arguments

Property Default Required Description
theme :dark No Visual theme of the spinner (:light, :dark)
size :default No Size variant (:tiny, :small, :default)

Theme Options

  • :dark - Dark themed spinner for light backgrounds
  • :light - Light themed spinner for dark backgrounds

Size Options

  • :default - Standard size (16px width)
  • :small - Smaller size (14px width)
  • :tiny - Smallest size (12px width)

Usage Examples

<!-- Default dark spinner -->
<%= render LooposUi::Spinner.new %>
<!-- Light theme spinner -->
<%= render LooposUi::Spinner.new(theme: :light) %>
<!-- Small size spinner -->
<%= render LooposUi::Spinner.new(size: :small) %>
<!-- Tiny light spinner -->
<%= render LooposUi::Spinner.new(theme: :light, size: :tiny) %>

Technical Details

The spinner uses Lottie animations for smooth, scalable graphics. Different JSON animation files are loaded based on the selected theme:

  • Dark theme: loopos_ui/loopos_spinner_dark.json
  • Light theme: loopos_ui/loopos_spinner_light.json