Skeleton Loader
The SkeletonLoader component is a versatile tool that can fill many roles within a project. At its heart, the component provides an indication to the user that something is coming but not yet available. There are over 30 pre-defined options available that can be combined to make custom examples.
info
For more details about Vuetify’s usage of SkeletonLoader component, click SkeletonLoader page.
For more prop explanations, click Vuetify SkeletonLoader API page.
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| boilerPlate | Remove the loading animation from the skeleton. | boolean | false |
| class | Allows custom properties to take effect. | string | undefined |
| dark | Applies the dark theme. | boolean | false |
| elevation | Designates an elevation applied to the component between 0 and 24. | number-string | 4 |
| height | Sets the height for the component. | number-string | 200 |
| width | Sets the width for the component. | number-string | 200 |
| light | Applies the light theme variant to the component. | boolean | false |
| loading | 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. | boolean | false |
| maxHeight | Sets the maximum height for the component. | number-string | undefined |
| maxWidth | Sets the maximum width for the component. | number-string | undefined |
| minHeight | Sets the minimum height for the component. | number-string | undefined |
| minWidth | Sets the minimum width for the component. | number-string | undefined |
| tile | Removes the component’s border-radius. | boolean | false |
| type | 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. | string | undefined |
| types | A custom types object that will be combined with the pre-defined options. For a list of available pre-defined options, see the type prop. | object | {} |
| visible | Visibility of SkeletonLoader component. | boolean | true |