KasyKasy

Skeleton

Live preview and documentation for the Skeleton component.

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.

Preview

Loading the component…

Last updated on 11/03/2026

On this page