Spinner & Skeleton

Loading indicators: inline spinner, full-page preloader, skeleton placeholders and dividers.

Spinner, skeleton, divider

Spinner, skeleton, divider

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>

React

<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} />

Angular

<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	Type	Default
size	string	—
label	string	—

Preloader

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

Prop	Type	Default
hidden	boolean	—

Skeleton

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

Prop	Type	Default
width	any	—
height	any	—
circle	boolean	—
count	number	1

Divider

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

Prop	Type	Default
vertical	boolean	—

Slots: default