Skip to main content
The Skeleton.vue component is a reusable Vue.js component designed as a placeholder for loading content. It displays a large div with a sliding linear gradient effect, simulating the appearance of loading.

​
Features

Placeholder for Content

Serves as a visual placeholder while content is being loaded.

Sliding Gradient Effect

Features a linear gradient animation to indicate loading activity.

Customizable Height

Adjust the height using CSS classes for flexible styling.

Full-Width Design

The width is always set to 100% for responsive design.

​
Usage

​
Basic Example

import { Skeleton } from '@robojuice/velure-ui';

<Skeleton class="h-52" />

​
Props

This component does not accept any props. Customization is achieved using CSS classes.

​
Example Use Cases

​
Placeholder for Content Loading

Use the Skeleton component as a placeholder for content that is being fetched from an API or server: 
<Skeleton class="h-64" />

​
Notes

  • Height Customization: The height of the skeleton is controlled using CSS classes. For example, use class="h-52" to set a height of 52 units.
  • Full-Width Design: The skeleton’s width is always 100%, making it suitable for content placeholders of any size.
  • Loading Effect: The sliding linear gradient effect visually indicates that the content is still loading.
For further customization, refer to the component’s source code.