x
1
2
3
<i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;"> progress_activity</i>Spinner
Description
Related components
| 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