Skeleton

Use a skeleton to convey a page or section’s structure while it’s loading.

The five types of skeleton loaders are body text, heading, circle, square, and rectangle. The type of skeleton used should closely reflect the type or shape of the content that is loading. For example, if you’re loading a round avatar, use the circle skeleton.

Body text skeleton sizes match the amount of space occupied by a line of text, which is calculated by multiplying their font size token by their line height token. The widths of these skeletons are customizable. The table below shows which body text skeleton size corresponds to each font size token.

Heading skeleton sizes work similarly to body text skeletons, and the widths of these skeletons are also customizable. The table below shows which heading skeleton size pairs with each font size token.

While the default size for a shape skeleton uses --rh-length-4xl for its height, most shape skeletons will need to use a custom size, and any length token or pixel value can be used to change their dimensions. Choose a size that matches the element or graphic that the skeleton represents.

The skeleton’s gradient animation will loop until the data is retrieved and disappears when it loads.

Each group of skeletons should have their gradients moving at the same speed to avoid the animation from being too distracting. It’s also recommended to avoid speeding up the animation for the same reason.

Do use skeletons when loading content takes longer than a couple seconds.

Do not use skeleton loaders for loading times under two seconds or for loading times longer than ten seconds.

Do mimic the structure of the actual content and use shapes that match the layout elements as closely as possible.

Do not use shapes that don’t correspond with the elements used in a layout. For example, a circle skeleton should not be used for a line of text.

Do use skeleton loaders for parts of a page that take more time to load.

Do not use one skeleton loader for an entire screen. (Try a spinner or another method instead.)