# Skeleton loaders

The v-skeleton-loader component is a versatile tool that can fill many roles within a project. At its heart, the component provides an indication to the user that something is coming but not yet available. There are over 30 pre-defined options available that can be combined to make custom examples.

# Usage

The v-skeleton-loader component provides a user with a visual indicator that content is coming / loading. This is better received than traditional full-screen loaders.


# Examples

# Misc

# Boilerplate component

The v-skeleton-loader can be used as boilerplate designs when creating mockups. Mix and match various pre-defined options or create your own unique implementations. In this example, we use a custom data property to apply the same props to multiple v-skeleton-loader's at once.

# Accessibility

By default, the v-skeleton-loader component is assigned a WAI-ARIA role of alert. We augment this role with two aria properties. An aria-busy value of true denotes that a widget is missing required owned elements. An aria-live value of polite sets the screen reader’s priority of live regions.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:04/07/2021, 3:01:23 AM