VSkeletonLoader API

Props

name	type	default
`boilerplate`	boolean	false
Remove the loading animation from the skeleton.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`height`	string \| number	undefined
Sets the height for the component.
`loading`	boolean	false
Applies a loading animation with a on-hover loading cursor. A value of false will only work when there is content in the `default` slot.
`loading-text`	string	'$vuetify.loading'
aria-label for the element in a loading state.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`type`	\| 'text' \| (string & {}) \| 'image' \| 'button' \| 'actions' \| 'avatar' \| 'article' \| 'table' \| 'divider' \| 'subtitle' \| 'table-row' \| 'list-item' \| 'chip' \| 'heading' \| 'sentences' \| 'paragraph' \| 'ossein' \| 'card' \| 'card-avatar' \| 'date-picker' \| 'date-picker-options' \| 'date-picker-days' \| 'list-item-avatar' \| 'list-item-two-line' \| 'list-item-avatar-two-line' \| 'list-item-three-line' \| 'list-item-avatar-three-line' \| 'table-heading' \| 'table-thead' \| 'table-tbody' \| 'table-row-divider' \| 'table-tfoot' \| ( \| 'text' \| (string & {}) \| 'image' \| 'button' \| 'actions' \| 'avatar' \| 'article' \| 'table' \| 'divider' \| 'subtitle' \| 'table-row' \| 'list-item' \| 'chip' \| 'heading' \| 'sentences' \| 'paragraph' \| 'ossein' \| 'card' \| 'card-avatar' \| 'date-picker' \| 'date-picker-options' \| 'date-picker-days' \| 'list-item-avatar' \| 'list-item-two-line' \| 'list-item-avatar-two-line' \| 'list-item-three-line' \| 'list-item-avatar-three-line' \| 'table-heading' \| 'table-thead' \| 'table-tbody' \| 'table-row-divider' \| 'table-tfoot' )[]	'ossein'
A string delimited list of skeleton components to create such as `type="text@3"` or `type="card, list-item"`. Will recursively generate a corresponding skeleton from the provided string. Also supports short-hand for multiple elements such as article@3 and paragraph@2 which will generate 3 article skeletons and 2 paragraph skeletons. Please see below for a list of available pre-defined options.
`width`	string \| number	undefined
Sets the width for the component.

Slots

never

`default`
The default Vue slot.

SASS Variables

name	default
`$skeleton-loader-actions-button-margin`	12px
`$skeleton-loader-actions-padding`	16px 16px 8px
`$skeleton-loader-avatar-height`	48px
`$skeleton-loader-avatar-margin`	8px 16px
`$skeleton-loader-avatar-width`	48px
`$skeleton-loader-background`	rgb(var(--v-theme-surface))
`$skeleton-loader-bone-background`	linear-gradient(90deg, tools.theme-color('surface', 0), tools.theme-color('surface', .3), tools.theme-color('surface', 0))
`$skeleton-loader-border-radius`	settings.$border-radius-root
`$skeleton-loader-button-border-radius`	settings.$border-radius-root
`$skeleton-loader-button-height`	36px
`$skeleton-loader-button-width`	64px
`$skeleton-loader-chip-border-radius`	16px
`$skeleton-loader-chip-height`	32px
`$skeleton-loader-chip-width`	96px
`$skeleton-loader-date-picker-border-radius`	inherit
`$skeleton-loader-date-picker-days-margin`	4px
`$skeleton-loader-date-picker-heading-max-width`	256px
`$skeleton-loader-date-picker-heading-width`	40%
`$skeleton-loader-date-picker-text-max-width`	88px
`$skeleton-loader-date-picker-text-width`	20%
`$skeleton-loader-divider-border-radius`	1px
`$skeleton-loader-divider-height`	2px
`$skeleton-loader-gutter`	16px
`$skeleton-loader-heading-border-radius`	12px
`$skeleton-loader-heading-height`	24px
`$skeleton-loader-image-height`	150px
`$skeleton-loader-loading-animation`	loading 1.5s infinite
`$skeleton-loader-loading-transform`	translateX(-100%)
`$skeleton-loader-subtitle-max-width`	70%
`$skeleton-loader-subtitle-text-border-radius`	8px
`$skeleton-loader-subtitle-text-height`	16px
`$skeleton-loader-table-cell-height`	48px
`$skeleton-loader-table-cell-width`	88px
`$skeleton-loader-table-row-margin`	0 8px
`$skeleton-loader-table-row-text-margin`	8px
`$skeleton-loader-text-background`	tools.theme-color('on-surface', var(--v-border-opacity))
`$skeleton-loader-text-border-radius`	6px
`$skeleton-loader-text-height`	12px
`$skeleton-loader-text-three-text-max-width`	70%
`$skeleton-loader-text-two-text-margin-top`	-8px
`$skeleton-loader-text-two-text-max-width`	50%

#VSkeletonLoader API

VSkeletonLoader API