KasyKasy

Skeleton

Live preview and documentation for the Skeleton component.

Preview

componentPreview.loading

About

Animated placeholder (bone) for content that's loading. KasySkeleton draws a rectangular or circular block; KasySkeletonGroup synchronizes the animation of every bone inside it.

  • KasySkeleton({ width, height, borderRadius }): rectangular bone.
  • KasySkeleton.circle({ size }): circular bone (avatar, icon).
  • borderRadius: corner radius of the rectangular bone; defaults to KasyRadius.smBorderRadius.
  • KasySkeletonGroup(animation: KasySkeletonAnimation): controls the animation of all child KasySkeleton widgets.
    • shimmer (default): a highlight band sweeps left to right.
    • pulse: all bones fade in and out together.
    • none: static color, no animation.

Automatically respects the system's "reduce motion" setting (falls back to none). Wrap your loading layout in KasySkeletonGroup and swap it for the real content once the data arrives.

Last updated on 08/23/2026

On this page