You are viewing the documentation for Vuetify 3
Go to Vuetify 2

Skeleton loaders

Skeleton loaders provide a simple way to display loading placeholders in your application.

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

ComponentDescription
v-skeleton-loaderPrimary Component

Anatomy

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

Element / AreaDescription
1. ContainerThe container is the root element of the component.

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>

Props

The v-skeleton-loader component has a small API mainly used to configure the root and item height.

Type

The type property is used to define the type of skeleton loader. Types can be combined to create more complex skeletons. For example, the card type is a combination of the image and card-heading types.

The following built-in types are available:

TypeComposition
actionsbutton@2
articleheading, paragraph
avataravatar
buttonbutton
cardimage, card-heading
card-avatarimage, list-item-avatar
card-headingheading
chipchip
date-pickerlist-item, card-heading, divider, date-picker-options, date-picker-days, actions
date-picker-optionstext, avatar@2
date-picker-daysavatar@28
dividerdivider
headingheading
imageimage
list-itemtext
list-item-avataravatar, text
list-item-two-linesentences
list-item-avatar-two-lineavatar, sentences
list-item-three-lineparagraph
list-item-avatar-three-lineavatar, paragraph
paragraphtext@3
sentencestext@2
subtitletext
tabletable-heading, table-thead, table-tbody, table-tfoot
table-headingheading, text
table-theadheading@6
table-tbodytable-row-divider@6
table-row-dividertable-row, divider
table-rowtable-cell@6
table-tfoottext@2, avatar@2
texttext

Loading

A skeleton loader is considered to be in a loading state if one of the following conditions are met:

  • The default slot is not used
  • The loading property is set to true

If either condition is met, the skeleton loader returns the type structure in place of the default slot and applies dimensions values; e.g. height, width, min-height, etc. If the condition is not met, the default slot is returned.

Elevation

The elevation property makes it easy to match the elevation of the skeleton loader to the content it is replacing.

Boilerplate

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.

Examples

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

Ice-cream suggestions

The following example demonstrates how the v-skeleton-loader component can be used to create a placeholder loading state for when content is being fetched from a server or loaded asynchronously.

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.

src/settings.scss
@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.

Configuring the aria-label

Configure the default text used in the v-skeleton-loader component in the locale options. The following example demonstrates how to update the loading-text property:

src/plugins/vuetify.js
import { createVuetify } from 'vuetify'

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

Navigate to the Internationalization (i18n)page for more information on how to configure the locale options.

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 onGitHub