Skeleton loader

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

Basic

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.

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 heading types.

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.

Using slot
Using if

Elevation

The elevationelevation 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.

Example

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

CONTENTS

  • Introduction

  • Basic

  • Type

  • Loading

  • Elevation

  • Boilerplate

  • Example