Cargando

Feedback de carga. Tres formas: máscara de servicio (LhLoading.show(...), a pantalla completa o sobre un contenedor especificado), directiva v-loading y el indicador giratorio básico LhSpinner.

Máscara de servicio a pantalla completa

Carga a pantalla completa

<script setup lang="ts">
import { LhLoading } from '@lh-ui/vue3'

const showFullscreen = () => {
  const handle = LhLoading.show({ fullscreen: true, lock: true })
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <LhButton @click="showFullscreen">Carga a pantalla completa 2 s</LhButton>
</template>

<script>
import { LhLoading } from '@lh-ui/vue3'

export default {
  methods: {
    showFullscreen() {
      const handle = LhLoading.show({ fullscreen: true, lock: true })
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <LhButton @click="showFullscreen">Carga a pantalla completa 2 s</LhButton>
</template>

Máscara sobre un contenedor especificado

Si no se pasa target, la máscara es a pantalla completa; al pasar un selector o un elemento, se extiende dentro del contenedor (absolute cubre el ancestro posicionado más cercano; si el contenedor es static, se le añade relative automáticamente y se restaura al cerrar).

Carga local

<script setup lang="ts">
import { ref } from 'vue'
import { LhLoading } from '@lh-ui/vue3'

const boxRef = ref<HTMLElement>()

const showBox = () => {
  const handle = LhLoading.show({ target: boxRef.value, text: 'Cargando...', lock: true })
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <div
    ref="boxRef"
    class="demo-loading-box"
  >
    <LhButton @click="showBox">Carga dentro del contenedor</LhButton>
  </div>
</template>

<script>
import { LhLoading } from '@lh-ui/vue3'

export default {
  methods: {
    showBox() {
      const handle = LhLoading.show({ target: this.$refs.boxRef, text: 'Cargando...', lock: true })
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <div
    ref="boxRef"
    class="demo-loading-box"
  >
    <LhButton @click="showBox">Carga dentro del contenedor</LhButton>
  </div>
</template>

Directiva v-loading

Tras app.use(LhLoading) (o la importación completa) se registra la directiva v-loading, que controla la visibilidad con un valor booleano.

<template>
  <div v-loading="busy" class="table-zone">…</div>
  <div v-loading:text="'Texto personalizado'" :style="busy2 ? 'height:200px' : ''">…</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const busy = ref(false)
const busy2 = ref(false)
</script>

<template>
  <div v-loading="busy" class="table-zone">…</div>
  <div v-loading:text="'Texto personalizado'" :style="busy2 ? 'height:200px' : ''">…</div>
</template>

<script>
export default {
  data() {
    return { busy: false, busy2: false }
  },
}
</script>

Indicador giratorio LhSpinner

Indicador giratorio básico, utilizable de forma independiente (también es el que renderiza el interior de la máscara semántica de carga).

LhSpinner

<script setup lang="ts">
</script>

<template>
  <div class="demo-loading-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" color="#8f9779" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div class="demo-loading-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" color="#8f9779" />
  </div>
</template>

Apariencia personalizada

text personaliza el mensaje, background define el fondo de la máscara, z-index controla el orden de apilamiento y spinner desactiva el indicador giratorio.

Apariencia personalizada

<script setup lang="ts">
import { LhLoading } from '@lh-ui/vue3'

const showStyled = () => {
  const handle = LhLoading.show({
    text: 'Sincronizando datos...',
    background: 'rgba(42, 37, 32, 0.6)',
    zIndex: 4000,
    spinner: false,
  })
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <LhButton @click="showStyled">Carga con aspecto personalizado 2 s</LhButton>
</template>

<script>
import { LhLoading } from '@lh-ui/vue3'

export default {
  methods: {
    showStyled() {
      const handle = LhLoading.show({
        text: 'Sincronizando datos...',
        background: 'rgba(42, 37, 32, 0.6)',
        zIndex: 4000,
        spinner: false,
      })
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <LhButton @click="showStyled">Carga con aspecto personalizado 2 s</LhButton>
</template>

API

LhLoadingMask Props

Prop	Descripción	Tipo	Predeterminado
fullscreen	Si es a pantalla completa (true cuando el objetivo es body)	boolean	—
text	Mensaje de carga (si no se pasa, se toma del paquete de idioma loading.text)	string	—
background	Color de fondo de la máscara (valor CSS background)	string	—
zIndex	Nivel de capa	number	—
spinner	Si se muestra el icono giratorio	boolean	true
sx	Props de maquetación rápida sx	LhSxProps	—

Servicio: LhLoading.show({ target?, text?, background?, lock?, spinner?, sx? }) devuelve { close }; app.use(LhLoading) registra la directiva v-loading.

Accesibilidad

• La máscara usa role="status" + aria-busy="true"; el mensaje se anuncia como aria-label
• Con un contenedor especificado, si inert está disponible (mejora progresiva), el contenedor resulta inalcanzable para el teclado y las tecnologías de asistencia, evitando operar los datos subyacentes
• lock bloquea el desplazamiento y lo restaura al cerrar; al cerrar la máscara se restauran el posicionamiento original del contenedor y su estado de desplazamiento
• La animación de rotación respeta prefers-reduced-motion

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/loading/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhLoadingMaskProps

/** Props de la máscara (renderizada internamente por el servicio y la directiva) */
export interface LhLoadingMaskProps {
  /** Si es a pantalla completa (true cuando el objetivo es body) */
  fullscreen?: boolean
  /** Mensaje de carga (si no se pasa, se toma del paquete de idioma loading.text) */
  text?: string
  /** Color de fondo de la máscara (valor CSS background) */
  background?: string
  /** Nivel de capa */
  zIndex?: number
  /** Si se muestra el icono giratorio (por defecto true) */
  spinner?: boolean
  sx?: LhSxProps
}

LhLoadingOptions _{(de @lh-ui/share/core/loading)}

/** Opciones de la máscara de carga (compartidas por el servicio y la directiva) */
export interface LhLoadingOptions {
  /** Objetivo de montaje: cadena selector / elemento; si no se pasa, es a pantalla completa */
  target?: string | HTMLElement
  /** Mensaje de carga (si no se pasa, se toma del paquete de idioma loading.text) */
  text?: string
  /** Color de fondo de la máscara (valor CSS background) */
  background?: string
  /** Si se bloquea el desplazamiento (la máscara a pantalla completa bloquea body; con objetivo, bloquea el propio objetivo) */
  lock?: boolean
  /** Si se muestra el icono giratorio */
  spinner?: boolean
  sx?: LhSxProps
}

LhLoadingHandle _{(de @lh-ui/share/core/loading)}

/** Manejador del servicio */
export interface LhLoadingHandle {
  close: () => void
}