Skeleton States


Skeleton screen is an animated placeholder that simulates the layout of a website or app while data is being loaded. They let the user know that some content is loading and provides an indication of what is loading, whether it's an image, text, card, and so on.

Skeleton States


Why do we use skeleton states?

Skeleton states are a great replacement of traditional page loaders because they can load each piece of content at a time instead of needing to load all content at once before showing the page.

When to use

Use on high-traffic pages where resources take a bit long to load like on the Accounts dashboard. Another example is when the component contains a good amount of information, such as a list or card. 

When not to use

Do not use skeleton states when there is a long-running process or importing data within tables, etc. This is when a page loader will be useful.



Element Property Value
Skeleton Background color ∆colorPlatformGray50 to ∆colorPlatformGray100


There are no state considerations for this component.


There are no theming considerations for this component.


Placement depends on the design.


The skeleton states will fade in and out to indicate that something is loading. We do not want it to be stationary due to the user thinking that the content has just been loaded as a gray container.

Developer Docs

Vue Developer Docs

Component documentation coming soon!