CSS: skeleton-loader

.instui-skeleton-loader — Skreyting staðgengill fyrir efni sem hefur ekki hlaðist enn.

TIP

JS viðbót — CSS þessa íhluta renderar og virkar sjálfstætt; paraðu hann við @pantoken/interactions til að bæta við gagnvirku hegðuninni. Sjá modifier table below.

Aðgengi

Merkja skrautlegan hleðslutákn aria-hidden="true". Setjið aria-busy á yfirmannsvæðið fyrir efni, með upphaflega tómri stöðu og viðvörun fyrir utan það svæði. Notið initSkeletonLoading from the interactions package to announce the parent's loading state. Form skulu ekki fá fókus.

Notkun

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

Dæmi

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

Uppbygging

.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;

Breytingar

Breyti	Lýsing
.-size-lg	Stór textaröð.
.-size-md	Miðlungs textaröð (sjálfgefið).
.-size-sm	Lítil textaröð.
.-size-xl	Aukastór textaröð.
.-size-xs	Auka-smá textaröð.
.-size-xxl	Stærsta textaröð.
.-size-xxs	Textaröð í legend-stærð.
.-type-avatar	Hringlaga avatar-staðgengill, aðeins í miðlungs stærð.
.-type-image	Mynd-staðgengill, aðeins í miðlungs stærð.
.-type-text	Textastika (sjálfgefið).

Hlutar

Hluti	Lýsing
.shape	Klipt staðgengils-yfirborð sem er stærðarstillt fyrir valinn hleðslutegund.
.skeleton-row	Endurtekin umbúð fyrir textaröð sem bætir við lóðréttu bilalagi.

Sýndareiningar

Sýndareining	Lýsing
::before	—

Sérsniðnar eigindir

Eiginleiki	Tegund	Sjálfgefið	Lýsing
--pantoken-skeleton-sweep	<percentage>	0%	—

Hreyfimyndir

Hreyfimynd	Lýsing
pantoken-skeleton-sweep	—

Skilyrði

Tegund	Fyrirspurn	Lýsing
media	(prefers-reduced-motion: reduce)	—

Notuð tákn

Token	Tegund	Gildi
--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