Skeleton
v1.6.0+

The QSkeleton is a component for displaying a placeholder preview of your content before you load the actual page data. It’s a nice way of informing the user of what to expect from the page before it is fully loaded and increases the perceived performance. It can be used to incrementally display information on screen as data is being fetched.

Installation


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QSkeleton'
    ]
  }
}

Usage

On a QCard



Predefined types

Below you can see the predefined types. There are some basic types (text, rect, circle) and also some special convenience types that accurately respect Quasar components size and border radius.

QSkeleton types



Animations

Animations



Sizing

Sizing



Styling

Bordered



Square borders



Custom color



Custom border



Recipes

Enjoy some pre-made recipes. Your imagination is the only limit.

Youtube



Facebook



Twitter



Twitch



Table



List



QSkeleton API