CSS: skeleton-loader

.instui-skeleton-loader — He tohu whakapaipai mō ngā ihirangi kāore anō kia utaina.

TIP

Whakawhānui JS — Ka tahuri te CSS o tēnei waahanga, ā, ka mahi anō ia i tōna ake; whakakotahitia ki @pantoken/interactions kia tāpiri i te whanonga tuitui. Tirohia te tāblata whakarerekētanga kei raro.

Wātea mō te katoa

Mark the decorative loader aria-hidden="true". Put aria-busy on the parent content region, with an initially empty status and alert outside that region. Use initSkeletonLoading from the interactions package to announce the parent's loading state. Shapes must not receive focus.

Ngā Whakamahi

@import "@pantoken/plugin-custom-components/custom-components.css";

Ngā tauira

<div style="display: flex; align-items: center; gap: 1rem; max-inline-size: 24rem">
  <div class="instui-skeleton-loader -type-avatar" aria-hidden="true">
    <div class="shape"></div>
  </div>
  <div style="flex: 1">
    <div class="instui-skeleton-loader -type-text -size-md" aria-hidden="true">
      <div class="skeleton-row" style="inline-size: 45%"><div class="shape"></div></div>
      <div class="skeleton-row" style="inline-size: 72%"><div class="shape"></div></div>
    </div>
  </div>
</div>

Hanganga

.instui-skeleton-loader
  .shape
  .skeleton-row (0..n)
    .shape

flowchart TD n0[".instui-skeleton-loader"]:::cssdoc-root n1(".shape"):::cssdoc-part n2(".skeleton-row"):::cssdoc-part n3(".shape"):::cssdoc-part n0 --> n1 n2 --> n3 n0 -->|0..n| n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Ngā Kaitī

Kaiwhakatikatika	Whakamārama
.-size-lg	Rārangi kuputuhi nui.
.-size-md	Rārangi kuputuhi rahi (taunoa).
.-size-sm	Rārangi kuputuhi iti.
.-size-xl	Rārangi kuputuhi tino-nui.
.-size-xs	Rārangi kuputuhi tino-iti.
.-size-xxl	Rārangi kuputuhi nui rawa.
.-size-xxs	Rārangi kuputuhi rahi mō te legend.
.-type-avatar	He tūāhua porowhita mō te avatar, mō te rahi waenganui anake.
.-type-image	He tūāhua whakaahua, mō te rahi waenganui anake.
.-type-text	He pae kuputuhi (taunoa).

Wāhanga

Wāhanga	Whakamārama
.shape	Ko te mata tūāhua tapahia kua whakaritea ki te rahi mō te momo kaituhi kua tohua.
.skeleton-row	He kapi rārangi kuputuhi e tau ai te mokowā poutū.

Ngā pseudo-kōwae

Pseudo-kōwae	Whakamārama
::before	—

Ngā taonga ritenga

Rawa	Momo	Taunoa	Whakamārama
--pantoken-skeleton-sweep	<percentage>	0%	—

Ngā Whakaari

Whakaari	Whakamārama
pantoken-skeleton-sweep	—

Ngā Conditions

Momo	Pātai	Whakamārama
media	(prefers-reduced-motion: reduce)	—

Ngā tohu i whakamahia

Token	Momo	Uara
--instui-component-skeleton-loader-avatar-border-radius	<length>	999rem
--instui-component-skeleton-loader-background-color	<color>	LightDarklight-dark(#8D959F, #5F6E7A)
--instui-component-skeleton-loader-bezier	—	0.42, 0, 0.58, 1
--instui-component-skeleton-loader-duration	<time>	1500ms
--instui-component-skeleton-loader-image-border-radius	<length>	0.5rem
--instui-component-skeleton-loader-shimmer-color	<color>	LightDarklight-dark(#AAB0B5, #737F8A)
--instui-component-skeleton-loader-text-border-radius	<length>	0.25rem
--instui-component-skeleton-loader-text-height-lg	<length>	1.75rem
--instui-component-skeleton-loader-text-height-md	<length>	1.5rem
--instui-component-skeleton-loader-text-height-sm	<length>	1.25rem
--instui-component-skeleton-loader-text-height-xl	<length>	2rem
--instui-component-skeleton-loader-text-height-xs	<length>	1rem
--instui-component-skeleton-loader-text-height-xxl	<length>	2.25rem
--instui-component-skeleton-loader-text-height-xxs	<length>	0.75rem
--instui-component-skeleton-loader-text-padding-lg	<length>	0.21875rem
--instui-component-skeleton-loader-text-padding-md	<length>	0.1875rem
--instui-component-skeleton-loader-text-padding-sm	<length>	0.15625rem
--instui-component-skeleton-loader-text-padding-xl	<length>	0.25rem
--instui-component-skeleton-loader-text-padding-xs	<length>	0.125rem
--instui-component-skeleton-loader-text-padding-xxl	<length>	0.28125rem
--instui-component-skeleton-loader-text-padding-xxs	<length>	0.1875rem
--instui-size-interactive-height-md	<length>	2.5rem
--pantoken-skeleton-height	<length>	1.5rem
--pantoken-skeleton-padding	<length>	0.1875rem
--pantoken-skeleton-radius	<length>	0.25rem