Version 4 beta
Forma 36 v4 beta is availableClick here to go to the new version
Forma 36

Skeleton Image

StorybookGithub
stable

Use the SkeletonImage component to simiulate images, illustrations, avatars or icons whenever loading asynchronous data.

Best practices

  • Each SkeletonImage needs to be wrapped by a SkeletonContainer component.
  • Pass some value to the width and height props to make the skeleton the same size as the simulated image (default values are 70). You can use the same values a normal <rect> tag would accept for width and height
  • Pass some value to the radiusX and radiusY props to control the roundness of skeleton's corners (default values are 0). You can use the same values a normal <rect> tag would accept for rx and ry