Skeleton

The Skeleton component provides a placeholder for content loading. It is used to visually represent the loading state of content before actual data is fetched or rendered.

Import

To use the Skeleton component, import it as follows:

import Skeleton from './Skeleton';

Props

Prop	Type	Default	Description
width	`string	number`	-
height	`string	number`	-
borderRadius	`string	number`	'0'

Example Usage

import React from 'react';
import Skeleton from './Skeleton';

const ExampleSkeleton = () => {
  return (
    <div>
      <Skeleton width="100px" height="20px" />
      <Skeleton width="80%" height="100px" borderRadius="8px" />
    </div>
  );
};

export default ExampleSkeleton;

Demo

In the above example, Skeleton components are used to create placeholders for various content elements. The width, height, and borderRadius props can be customized to achieve different styles and effects for the skeleton placeholders.