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
Props
This component does not accept any props. Customization is achieved using CSS classes.Example Use Cases
Placeholder for Content Loading
Use theSkeleton component as a placeholder for content that is being fetched from an API or server:
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.