Loading ローディング

読み込み中のフィードバック。3 つの形態：サービス式オーバーレイ（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 スピナー

基本のスピナーで、単体でも使用できます（loading のセマンティックオーバーレイの内部表示にも使用されます）。

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	フルスクリーンかどうか（対象が body のとき true）	`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 {
  /** フルスクリーンかどうか（対象が body のとき true） */
  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
}

Loading ローディング ​

サービス式フルスクリーンオーバーレイ ​

コンテナ指定オーバーレイ ​

v-loading ディレクティブ ​

LhSpinner スピナー ​

外観のカスタマイズ ​

API ​

LhLoadingMask Props ​

アクセシビリティ ​

型定義 ​