MenuCaderno UI
npmGitHub
Theme

<cad-skeleton>

Skeleton

Reserve space while content loads. Combine text, rectangle, and circle placeholders to match the expected layout.

Loading a profile

Loading profile…

Shapes

Match the shape of the content being loaded.

Rectangle

Circle

Text lines

API reference: <cad-skeleton>

animationanimationCadSkeletonAnimation'pulse'lineslinesnumber1shapeshapeCadSkeletonShape'text'animationCadSkeletonAnimationanimationyeslinesnumberlinesyesshapeCadSkeletonShapeshapeyesbasePlaceholder group.itemEach rendered placeholder shape or text line.--cad-skeleton-bgPlaceholder base color.--cad-skeleton-highlightTraveling highlight color for `wave`.--cad-skeleton-widthItem width. A circle also uses it as its default height.--cad-skeleton-heightItem height.--cad-skeleton-radiusItem corner radius.--cad-skeleton-gapGap between repeated text lines.--cad-skeleton-last-line-widthFinal line width when `lines` is greater than one.

Which loading indicator?

  • Use Skeleton for an initial load whose final layout is predictable.
  • Use Spinner for compact indeterminate work such as a button action.
  • Use Progress when the amount completed can be measured.
  • During background refresh, keep useful content visible and mark its region busy instead of replacing it with a skeleton.

Size

Set --cad-skeleton-width and --cad-skeleton-height to match the expected content. Text supports up to 20 lines; adjust the last with --cad-skeleton-last-line-width.

Accessibility

Skeletons are decorative. Set aria-busy="true" on the updating region and provide one status message. Animation stops with reduced-motion preferences.

MIT licensed. Built with Caderno UI.Report an issue
Back to top