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.
Usage
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.
Animations
Sizing
Styling
Recipes
Enjoy some pre-made recipes. Your imagination is the only limit.
Accessibility v2.25+
QSkeleton is a decorative placeholder carrying no ARIA — a screen reader wandering into a skeleton screen finds only empty, unlabeled boxes. Hide skeletons from assistive technology with aria-hidden="true", or mark the loading region itself with aria-busy="true" so its not-yet-ready state is conveyed instead.