K
KoreUI

Loading

UI

Indicador de carga con 3 tipos, soporte para overlay, blur y texto descriptivo.

Uso básico

<x-kore::loading />
<x-kore::loading />

Tipos

Tres tipos de indicador: spinner (default), dots y pulse.

<x-kore::loading type="spinner" />
<x-kore::loading type="dots" />
<x-kore::loading type="pulse" />
<x-kore::loading type="spinner" />
<x-kore::loading type="dots" />
<x-kore::loading type="pulse" />

Tamaños

Tres tamaños: sm, md (default), lg.

<x-kore::loading size="sm" />
<x-kore::loading size="md" />
<x-kore::loading size="lg" />
<x-kore::loading size="sm" />
<x-kore::loading size="md" />
<x-kore::loading size="lg" />

Con texto

Texto descriptivo debajo del indicador.

Cargando datos... 
<x-kore::loading text="Cargando datos..." />
<x-kore::loading text="Cargando datos..." />

Overlay

Modo overlay con posición absoluta sobre el contenedor padre.

Contenido debajo del overlay.

Procesando... 
<div class="relative h-32 border border-kore-border rounded-kore-lg p-4">
    <p>Contenido debajo del overlay.</p>
    <x-kore::loading overlay text="Procesando..." />
</div>
<div class="relative h-32 border border-kore-border rounded-kore-lg p-4">
    <p>Contenido debajo del overlay.</p>
    <x-kore::loading overlay text="Procesando..." />
</div>

Overlay con blur

Overlay con efecto de desenfoque en el fondo.

Contenido con blur de fondo.

<div class="relative h-32 border border-kore-border rounded-kore-lg p-4">
    <p>Contenido con blur de fondo.</p>
    <x-kore::loading overlay blur />
</div>
<div class="relative h-32 border border-kore-border rounded-kore-lg p-4">
    <p>Contenido con blur de fondo.</p>
    <x-kore::loading overlay blur />
</div>

Props

Prop Tipo Default Descripción
type string spinner Tipo: spinner, dots, pulse
size string md Tamaño: sm, md, lg
text string|null null Texto debajo del indicador
overlay bool false Modo overlay (absolute inset-0)
blur bool false Backdrop blur en overlay