CSS: skeleton-loader ​

.instui-skeleton-loader — 裝飾性占位符，用於尚未載入的內容。

TIP

JS 加強 — 此元件的 CSS 可獨立呈現並運作；與 @pantoken/interactions 配對可新增互動行為。請參閱下方的 修飾子表格。

無障礙 ​

將裝飾性載入器標記為 aria-hidden="true"。在父內容區域上放置 aria-busy， 並在該區域外使用最初為空的狀態和警示。使用 initSkeletonLoading from the interactions package 來通報父層的載入狀態。形狀不得獲得焦點。

使用方法 ​

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

範例 ​

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

結構 ​

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

修飾器 ​

修飾器說明
.-size-lg大型文字列。
.-size-md中型文字列 (default).
.-size-sm小型文字列。
.-size-xl超大型文字列。
.-size-xs超小型文字列。
.-size-xxl最大文字列。
.-size-xxs圖例大小文字列。
.-type-avatar圓形大頭貼占位符，僅中等尺寸。
.-type-image圖片占位符，僅中等尺寸。
.-type-text文字欄 (default).

部件 ​

部件說明
.shape為所選載入器類型裁剪的占位表面。
.skeleton-row一個重複的文字列包裝器，用於套用垂直間距。

偽元素 ​

偽元素說明
::before—

自訂屬性 ​

屬性型別預設說明
--pantoken-skeleton-sweep<percentage>0%—

動畫 ​

動畫說明
pantoken-skeleton-sweep—

條件 ​

型別查詢說明
media(prefers-reduced-motion: reduce)—

已使用的代幣 ​

Token型別值
--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