x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="lui-skeleton "> <div class="lui-skeleton__item"> <div class="lui-skeleton__bar" style="width: 100%"></div> </div> <div class="lui-skeleton__item"> <div class="lui-skeleton__bar" style="width: 100%"></div> </div> <div class="lui-skeleton__item"> <div class="lui-skeleton__bar" style="width: 100%"></div> </div> <div class="lui-skeleton__item"> <div class="lui-skeleton__bar" style="width: 100%"></div> </div> <div class="lui-skeleton__footer"> <div class="lui-skeleton__bar--footer"></div> <div class="lui-skeleton__bar--footer lui-skeleton__bar--footer--invisible"></div> </div></div>Loadings::Skeleton
Description
Related components
| Used Components | Components where is Used |
|---|---|
| Label |
Usage rules
- ✅ Do
- ❌ Don't
1
<%= render LooposUi::Loadings::Skeleton.new(full: params[:full] || false) %>No notes provided.
| Param | Description | Input |
|---|---|---|
|
— |
|
Loadings::Skeleton Component
Description
The Loadings::Skeleton component is part of the LooposUi::Loadings module. It is designed to be used as a placeholder within turbo-frames or any content that will be replaced upon receiving a response. This component provides a lightweight skeleton loading effect to improve perceived loading times and enhance user experience.
Arguments
| Property | Default | Type | Description |
|---|---|---|---|
full |
false |
Boolean | Optional boolean. When true, renders the skeleton to occupy the full width or area of its frame. |
n_rows |
4 |
Integer | Number of skeleton bars to display. Controls how many rows of skeleton content are shown. |
Child Components
Loadings::Skeleton::Bar
A child component that renders individual skeleton bars with customizable width.
Arguments
| Property | Default | Type | Description |
|---|---|---|---|
width |
"100%" |
String | Width of the skeleton bar. Can be any valid CSS width value (e.g., "100%", "200px", "50%"). |
Usage
# Default full-width barrender LooposUi::Loadings::Skeleton::Bar.new# Custom width barrender LooposUi::Loadings::Skeleton::Bar.new(width: "200px")# Percentage width barrender LooposUi::Loadings::Skeleton::Bar.new(width: "75%")