Загрузка

Индикатор загрузки. Три формы: сервисная маска (LhLoading.show(...), на весь экран или в указанном контейнере), директива v-loading и базовый вращающийся индикатор LhSpinner.

Сервисная полноэкранная маска

vue

<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">Загрузка на 2 секунды</LhButton>
</template>

vue

<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">Загрузка на 2 секунды</LhButton>
</template>

Маска в указанном контейнере

Без target маска на весь экран; если передать селектор или элемент, маска разворачивается внутри контейнера (absolute заполняет ближайший позиционированный предок; для static-контейнера автоматически добавляется relative, а после закрытия исходное значение восстанавливается).

vue

<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: 'Идёт загрузка', lock: true })
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <div
    ref="boxRef"
    class="demo-loading-box"
  >
    <LhButton @click="showBox">Загрузка в контейнере</LhButton>
  </div>
</template>

vue

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

export default {
  methods: {
    showBox() {
      const handle = LhLoading.show({ target: this.$refs.boxRef, text: 'Идёт загрузка', lock: true })
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <div
    ref="boxRef"
    class="demo-loading-box"
  >
    <LhButton @click="showBox">Загрузка в контейнере</LhButton>
  </div>
</template>

Директива v-loading

После app.use(LhLoading) (или при полном импорте) регистрируется директива v-loading, видимость управляется логическим значением.

vue

<template>
  <div v-loading="busy" class="table-zone">…</div>
  <div v-loading:text="'Свой текст'" :style="busy2 ? 'height:200px' : ''">…</div>
</template>

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

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

vue

<template>
  <div v-loading="busy" class="table-zone">…</div>
  <div v-loading:text="'Свой текст'" :style="busy2 ? 'height:200px' : ''">…</div>
</template>

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

Вращающийся индикатор LhSpinner

Базовый вращающийся индикатор, пригоден для самостоятельного использования (внутри семантической маски загрузки отображается именно он).

vue

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

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

vue

<script>
export default {}
</script>

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

Пользовательский внешний вид

text задаёт текст подсказки, background — фон маски, z-index управляет порядком наложения, spinner отключает вращающийся индикатор.

vue

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

const showStyled = () => {
  const handle = LhLoading.show({
    text: 'Синхронизация данных…',
    background: 'rgba(42, 37, 32, 0.6)',
    zIndex: 4000,
    spinner: false,
  })
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <LhButton @click="showStyled">Загрузка с кастомным стилем, 2 секунды</LhButton>
</template>

vue

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

export default {
  methods: {
    showStyled() {
      const handle = LhLoading.show({
        text: 'Синхронизация данных…',
        background: 'rgba(42, 37, 32, 0.6)',
        zIndex: 4000,
        spinner: false,
      })
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <LhButton @click="showStyled">Загрузка с кастомным стилем, 2 секунды</LhButton>
</template>

API

LhLoadingMask Props

Свойство	Описание	Тип	По умолчанию
fullscreen	На весь экран (true, если цель — body)	`boolean`	—
text	Текст подсказки о загрузке (если не передан, берётся из языкового пакета `loading.text`)	`string`	—
background	Фон маски (значение CSS background)	`string`	—
zIndex	Уровень наложения	`number`	—
spinner	Показывать ли вращающийся индикатор	`boolean`	`true`
sx	Свойства быстрой разметки sx	`LhSxProps`	—

Сервис: LhLoading.show({ target?, text?, background?, lock?, spinner?, sx? }) возвращает { close }; app.use(LhLoading) регистрирует директиву v-loading.

Доступность

Маска имеет role="status" + aria-busy="true", текст подсказки объявляется через aria-label
При указании контейнера, если доступен inert (прогрессивное улучшение), контейнер становится недостижимым для клавиатуры и вспомогательных технологий, что предотвращает операции с базовыми данными
lock блокирует прокрутку с восстановлением после закрытия; при закрытии маски контейнеру возвращаются исходные позиционирование и состояние прокрутки
Вращающаяся анимация уважает prefers-reduced-motion

Определения типов

Структуры TypeScript, экспортируемые этим компонентом (автоматически извлечены из packages/components/loading/src/types.ts и исходников @lh-ui/share/core/*; нажмите на каждый пункт, чтобы развернуть полное определение; описания свойств см. в таблице Props выше):

LhLoadingMaskProps

/** Props компонента маски (рендерится внутри сервиса / директивы) */
export interface LhLoadingMaskProps {
  /** На весь экран (true, если цель — body) */
  fullscreen?: boolean
  /** Текст подсказки о загрузке (если не передан, берётся из языкового пакета loading.text) */
  text?: string
  /** Фон маски (значение CSS background) */
  background?: string
  /** Уровень наложения */
  zIndex?: number
  /** Показывать ли вращающийся индикатор (по умолчанию true) */
  spinner?: boolean
  sx?: LhSxProps
}

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

/** Параметры маски загрузки (общие для сервиса и директивы) */
export interface LhLoadingOptions {
  /** Цель монтирования: строка-селектор / элемент; если не указано — на весь экран */
  target?: string | HTMLElement
  /** Текст подсказки о загрузке (если не передан, берётся из языкового пакета loading.text) */
  text?: string
  /** Фон маски (значение CSS background) */
  background?: string
  /** Блокировать ли прокрутку (полноэкранная маска блокирует body, маска с целью — прокрутку самой цели) */
  lock?: boolean
  /** Показывать ли вращающийся индикатор */
  spinner?: boolean
  sx?: LhSxProps
}

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

/** Дескриптор сервиса */
export interface LhLoadingHandle {
  close: () => void
}

Загрузка ​

Сервисная полноэкранная маска ​

Маска в указанном контейнере ​

Директива v-loading ​

Вращающийся индикатор LhSpinner ​

Пользовательский внешний вид ​

API ​

LhLoadingMask Props ​

Доступность ​

Определения типов ​