#Skeleton loaders

#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.

#API

#Anatomy

The v-skeleton-loader has a default slot that is rendered when the component is not in a loading state.

#Guide

The v-skeleton-loader component can be used in a variety of contexts, including cards, lists, and tables. It can be used to create a placeholder loading state for when content is being fetched from a server or loaded asynchronously.

The following code snippet is an example of a basic v-skeleton-loader component. When no type property is provided, the component will default to an image type.

<v-skeleton-loader></v-skeleton-loader>

#Examples

The following are a collection of examples that demonstrate more advanced and real world use of the v-skeleton-loader component.

#SASS Variables

Make fine tuned changes by modifying the v-skeleton-loader SASS variables. This is useful when you want to change the default button height or padding.

@use 'vuetify/settings' with (
  $skeleton-loader-gutter: 24px,
  $skeleton-loader-button-width: 80px,
);

For a list of all available SASS variables, navigate to the v-skeleton-loaderAPI page.

#Accessibility

By default, the v-skeleton-loader component is assigned a WAI-ARIArole of alert. We augment this role with three aria properties. An aria-busyvalue of true denotes that a widget is missing required owned elements. An aria-livevalue of polite sets the screen reader’s priority of live regions. And finally, aria-label, which is used to provide a human readable description of the element.

import { createVuetify } from 'vuetify'

export default createVuetify({
  locale: {
    messages: {
      loading: 'Loading content...',
    },
  },
})