Inputs & Textarea
Pull to Refresh
React Grid Layout
Skeleton loaders are visual placeholders for information while data is still loading.
A skeleton loader provides a low fidelity representation of the interface that will be loaded.
A skeleton loader can be built using a combination of the variations listed below. Skeleton Loader has four key variations — skeleton item, skeleton area, skeleton table, and skeleton text.
Skeleton item offers three shapes to build your own custom skeleton loader framework – circle, rounded, and square.
Skeleton area can be used for image or chart areas and can optionally include a centered icon. See available icons.
Skeleton table should be used for grid or table components. The skeleton can be set to a custom number of rows and columns to more closely match the expected interface.
Skeleton text should be used where text elements like headings, paragraphs or labels will be rendered. The component is built to match the height of the text being shown by referencing typography tokens.
Skeleton loader components can be set to have a pulse animation, wave animation or no animation.
Skeleton items come in five sizes to match the typical sizes of component within the system — extra small, small, medium, large and extra large.
DO: Map the skeleton shapes to the general size and shape of the data that will be replacing it once loaded.
DON'T: Use too much detail or color in the skeleton.