K
KoreUI

Skeleton

UI

Placeholder animado que muestra la estructura del contenido mientras se carga.

Uso básico

<x-kore::skeleton />
<x-kore::skeleton shape="circle" size="3rem" />
<x-kore::skeleton shape="text" :lines="3" />
<x-kore::skeleton />
<x-kore::skeleton shape="circle" size="3rem" />
<x-kore::skeleton shape="text" :lines="3" />

Formas

Tres formas: rect (default), circle y text.

{{-- Rectángulo --}}
<x-kore::skeleton width="100%" height="1rem" />

{{-- Círculo --}}
<x-kore::skeleton shape="circle" size="3rem" />

{{-- Texto multilínea --}}
<x-kore::skeleton shape="text" :lines="4" />
{{-- Rectángulo --}}
<x-kore::skeleton width="100%" height="1rem" />

{{-- Círculo --}}
<x-kore::skeleton shape="circle" size="3rem" />

{{-- Texto multilínea --}}
<x-kore::skeleton shape="text" :lines="4" />

Texto multilínea

Genera múltiples líneas simulando texto.

<x-kore::skeleton shape="text" :lines="2" />
<x-kore::skeleton shape="text" :lines="5" />
<x-kore::skeleton shape="text" :lines="2" />
<x-kore::skeleton shape="text" :lines="5" />

Animaciones

Tres tipos: shimmer (default), pulse y none.

{{-- Shimmer — gradiente que barre de izquierda a derecha --}}
<x-kore::skeleton animation="shimmer" width="100%" height="1rem" />

{{-- Pulse — fade de opacidad --}}
<x-kore::skeleton animation="pulse" width="100%" height="1rem" />

{{-- Sin animación --}}
<x-kore::skeleton animation="none" width="100%" height="1rem" />
{{-- Shimmer — gradiente que barre de izquierda a derecha --}}
<x-kore::skeleton animation="shimmer" width="100%" height="1rem" />

{{-- Pulse — fade de opacidad --}}
<x-kore::skeleton animation="pulse" width="100%" height="1rem" />

{{-- Sin animación --}}
<x-kore::skeleton animation="none" width="100%" height="1rem" />

Composición

Compón skeletons para simular layouts complejos como cards.

<div class="rounded-kore-lg border border-kore-border p-4 space-y-4">
    <x-kore::skeleton width="100%" height="8rem" />
    <x-kore::skeleton shape="text" :lines="2" />
    <div class="flex items-center gap-3">
        <x-kore::skeleton shape="circle" size="2.5rem" />
        <div class="flex-1 space-y-2">
            <x-kore::skeleton width="60%" height="0.75rem" />
            <x-kore::skeleton width="40%" height="0.75rem" />
        </div>
    </div>
</div>
<div class="rounded-kore-lg border border-kore-border p-4 space-y-4">
    <x-kore::skeleton width="100%" height="8rem" />
    <x-kore::skeleton shape="text" :lines="2" />
    <div class="flex items-center gap-3">
        <x-kore::skeleton shape="circle" size="2.5rem" />
        <div class="flex-1 space-y-2">
            <x-kore::skeleton width="60%" height="0.75rem" />
            <x-kore::skeleton width="40%" height="0.75rem" />
        </div>
    </div>
</div>

Props

Prop Tipo Default Descripción
shape string rect Forma: rect, circle, text
width string|null null Ancho CSS (ej: 200px, 100%)
height string|null null Alto CSS (ej: 1rem, 40px)
size string|null null Atajo para width=height (ideal para circles)
lines int 1 Número de líneas para shape=text
animation string shimmer Tipo de animación: shimmer, pulse, none
rounded string|null null Border radius personalizado

Configuración

Puedes personalizar los defaults en config/kore-ui.php.

config/kore-ui.php 
// config/kore-ui.php
'skeleton' => [
    'animation' => 'shimmer',  // shimmer|pulse|none
],
// config/kore-ui.php
'skeleton' => [
    'animation' => 'shimmer',  // shimmer|pulse|none
],