Enums

The following enums are available in the Skeleton component:

NameValueDescription
AnimationType
'Fade' | 'None' | 'Pulse' | 'Wave'

Enum representing the different shimmer animations for the skeleton.

  • Fade - Creates a fading opacity animation that alternates between more and less visible states, providing a subtle pulsing animation.
  • None - Disables animation effects, showing a static shimmer placeholder without any movement or transition.
  • Pulse - Applies a pulsing animation that changes the opacity or intensity of the shimmer element in a rhythmic pattern.
  • Wave - Animates a wave-like gradient that moves across the shimmer element, creating a smooth flowing animation from one side to the other.
Variants
'Circle' | 'Rectangle' | 'Square' | 'Text'

Defines the available variant types for skeleton loading placeholders. These placeholder variants represent different UI elements during loading states.

  • Circle - Represents a circular placeholder, suitable for avatars, profile pictures, icons, or other circular UI elements.
  • Rectangle - Represents a rectangular placeholder with different width and height dimensions, suitable for cards, images, buttons, or other non-square UI elements.
  • Square - Represents a square placeholder with equal width and height, suitable for buttons, icons, or thumbnails with 1:1 aspect ratio.
  • Text - Represents a text line or paragraph placeholder with rounded corners, suitable for displaying loading states for textual content.