CSS: skeleton-loader ​

.instui-skeleton-loader — 아직 로드되지 않은 콘텐츠를 위한 장식용 자리표시자.

TIP

JS 향상 — 이 컴포넌트의 CSS는 자체적으로 렌더링되고 동작합니다; 상호작용 동작을 추가하려면 @pantoken/interactions와 짝지으세요. 아래 수정자 표를 참고하세요.

접근성 ​

장식용 로더는 aria-hidden="true"로 표시하세요. 부모 콘텐츠 영역에 aria-busy를 설정하고, 처음에는 빈 상태와 해당 영역 외부에 경고를 둡니다. 부모의 로딩 상태를 알리려면 the interactions 패키지의 initSkeletonLoading을 사용하세요. 셰이프는 포커스를 받지 않아야 합니다.

사용법 ​

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중간 텍스트 행 (기본값).
.-size-sm작은 텍스트 행.
.-size-xl특대 텍스트 행.
.-size-xs초소형 텍스트 행.
.-size-xxl가장 큰 텍스트 행.
.-size-xxs범례 크기 텍스트 행.
.-type-avatar둥근 아바타 자리표시자, 중간 크기 전용.
.-type-image이미지 자리표시자, 중간 크기 전용.
.-type-text텍스트 바 (기본값).

부분 ​

부분설명
.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