Visuals

UI Kit

To keep in mind

• Indicate the shape of content to arrive in a loading skeleton.
• Loading placeholders follow the shape and form of what will be loaded – the width, height, colors and text line-heights align to the built components.
• Assuming the content will instantly load without a page reload, animate the loading placeholder’s opacity.
• If the skeleton loading will load in content when it’s ready without refreshing the page, animate the loading placeholders. We don’t currently use gradients in our branding aesthetic, so for ‘shimmering’ skeletons we opt for opacity changes rather than animated gradients.

When to use

• Use with a loading skeleton.

When not to use

• Only use loading placeholders with loading skeletons.

External Links

• Polaris: skeleton display text
• Polaris: skeleton body text