컴포넌트
Skeleton
로딩 중인 콘텐츠의 자리를 표시합니다.
설치
pnpm dlx ply-ui add skeleton공통 설치 설정을 먼저 적용합니다.
사용법
내용을 불러오는 동안 사용할 자리 표시입니다. style로 너비와 높이를 지정합니다. 기본적으로 스크린 리더에서 숨겨지므로 로딩 안내는 별도로 제공합니다.
구현 코드
components/ui/skeleton.tsx
import type { ComponentProps } from "react";
import { cx } from "../../lib/cx";
import "./skeleton.css";
export function Skeleton({ className, ...props }: ComponentProps<"div">) {
return (
<div
aria-hidden="true"
{...props}
className={cx("rbx-skeleton", className)}
/>
);
}
components/ui/skeleton.css
@layer theme, base, components, utilities;
@layer components.ply-base, components.ply;
@layer components.ply {
/* skeleton — semantic HTML composition. */
.rbx-skeleton {
border-radius: 8px;
background: var(--rbx-color-common-shimmer);
min-height: 16px;
animation: rbx-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes rbx-pulse {
to {
opacity: 0.45;
}
}
}