加载与骨架屏

加载指示器：行内 spinner、全页 preloader、骨架屏占位以及分割线。

Spinner、骨架屏、分割线

VueReactAngular

vue

<div class="thl-stack">
  <div class="thl-demo-row"><ThlSpinner size="sm" /><ThlSpinner /><ThlSpinner size="lg" label="Loading" /></div>
  <div style="display:flex;gap:12px;align-items:center"><ThlSkeleton :width="48" :height="48" circle /><div style="flex:1"><ThlSkeleton :count="3" /></div></div>
  <ThlDivider /><ThlDivider>OR</ThlDivider>
</div>

tsx

<Spinner size="sm" /> <Spinner /> <Spinner size="lg" label="Loading" />
<Skeleton width={48} height={48} circle />
<Skeleton count={3} />
<Divider />
<Divider>OR</Divider>
<Preloader hidden={ready} />

html

<thl-spinner size="sm" /> <thl-spinner /> <thl-spinner size="lg" label="Loading" />
<!-- Skeleton / Divider / Preloader: use the CSS classes thl-skeleton, thl-divider, thl-preloader -->

API

Spinner

<ThlSpinner> · import { ThlSpinner } from '@thl-ui/vue'

Prop	类型	默认值
`size`	`string`	—
`label`	`string`	—

Preloader

<ThlPreloader> · import { ThlPreloader } from '@thl-ui/vue'

Prop	类型	默认值
`hidden`	`boolean`	—

Skeleton

<ThlSkeleton> · import { ThlSkeleton } from '@thl-ui/vue'

Prop	类型	默认值
`width`	`any`	—
`height`	`any`	—
`circle`	`boolean`	—
`count`	`number`	`1`

Divider

<ThlDivider> · import { ThlDivider } from '@thl-ui/vue'

Prop	类型	默认值
`vertical`	`boolean`	—

插槽: default

加载与骨架屏 ​

Spinner、骨架屏、分割线 ​