CSS: skeleton-loader

.instui-skeleton-loader — Chỗ giữ trang trí cho nội dung chưa tải.

TIP

Nâng cao JS — CSS của component này tự render và hoạt động độc lập; ghép với @pantoken/interactions để thêm hành vi tương tác. Xem bảng modifier phía dưới.

Khả năng truy cập

Đánh dấu bộ tải trang trí aria-hidden="true". Đặt aria-busy trên vùng nội dung cha, với trạng thái ban đầu trống và cảnh báo bên ngoài vùng đó. Sử dụng initSkeletonLoading from the interactions package để thông báo trạng thái đang tải của phần tử cha. Các hình dạng không được nhận tiêu điểm.

Sử dụng

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

Các ví dụ

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

Cấu trúc

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

Bộ sửa

Bộ sửa	Mô tả
.-size-lg	Hàng văn bản lớn.
.-size-md	Hàng văn bản trung bình (mặc định).
.-size-sm	Hàng văn bản nhỏ.
.-size-xl	Hàng văn bản rất lớn.
.-size-xs	Hàng văn bản rất nhỏ.
.-size-xxl	Hàng văn bản lớn nhất.
.-size-xxs	Hàng văn bản kích thước chú giải.
.-type-avatar	Chỗ giữ avatar tròn, chỉ kích thước trung bình.
.-type-image	Chỗ giữ ảnh, chỉ kích thước trung bình.
.-type-text	Thanh văn bản (mặc định).

Phần

Phần	Mô tả
.shape	Bề mặt chỗ giữ bị cắt, được kích thước phù hợp với loại bộ tải đã chọn.
.skeleton-row	Một vỏ bọc hàng văn bản lặp lại áp dụng khoảng cách theo chiều dọc.

Phần tử giả

Phần tử giả	Mô tả
::before	—

Thuộc tính tuỳ chỉnh

Thuộc tính	Kiểu	Mặc định	Mô tả
--pantoken-skeleton-sweep	<percentage>	0%	—

Hoạt ảnh

Hoạt ảnh	Mô tả
pantoken-skeleton-sweep	—

Điều kiện

Kiểu	Truy vấn	Mô tả
media	(prefers-reduced-motion: reduce)	—

Token tiêu thụ

Token	Kiểu	Giá trị
--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