Loading 載入遮罩

全螢幕或局部的載入遮罩：提交中、列表載入等場景凍結使用者互動並給出等待提示。

基礎用法

基礎用法

作品列表區域（局部遮罩掛載目標）

lock=true 時該區域捲動鎖定並 inert 凍結互動。

import { loading } from '@lh-ui/react'
import '@lh-ui/react/style/loading'

const handle = loading.show({ text: '提交中…' })
setTimeout(() => handle.close(), 1500)

// 掛到指定區域而非全螢幕
loading.show({ target: cardRef.current })

loading 方法

方法	說明	傳回值
show	顯示遮罩	{ close }
closeAll	關閉全部活動實例（跳過退場動畫）	void

const handle = loading.show({ target: '#card', lock: true })
handle.close()

LhLoadingOptions

屬性	說明	型別	預設值
target	掛載目標：選擇器字串 / 元素；不傳為全螢幕	string | HTMLElement	全螢幕（body）
text	提示文案	string	語言包（zh-CN：加载中…）
background	遮罩背景色（CSS background 值）	string	rgba(255,255,255,72%)
lock	是否鎖定捲動（全螢幕鎖 body，指定目標鎖目標自身）	boolean	true

與 message / notification 的差異

loading 掛到任意目標元素（全螢幕或局部），無法共用單例容器，故走 per-instance createRoot：每個實例持有自己的 root 與還原句柄。同一目標重複 show 會先卸載舊實例。

局部遮罩的互動凍結

非全螢幕遮罩除鎖定目標捲動外，還對目標設定 inert 凍結其內容互動；關閉後自動還原 overflow / inert / position（static 定位的目標會被臨時補 relative）。

無障礙

遮罩為 role="status" + aria-busy="true"，文案作為 aria-label 播報； 旋轉圖示為裝飾圖形（aria-hidden）。

按需引入樣式

遮罩重用 button 的 spinner 畫法（.lh-button__spinner），頁面需同時引入 @lh-ui/react/style/button 才有旋轉動畫。

樣式

import '@lh-ui/react/style/loading'