Store

For Enterprise

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.

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.

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

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 are extending the v-skeleton-loader into a new component called v-boilerplate for use as a functional boilerplate component.

There are 2 ways that you can utilize the v-skeleton-component. The default slot or a v-if conditional. The built in slot is the most convenient and easiest to use, but generates an extra div once rendered. If the extra div is an issue in your setup, you can utilize a v-if conditional with a Vuetify transition component or a custom one.

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 reading with:

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!