SkeletonLoading

Description

The SkeletonLoading component is a versatile and user-friendly UI element designed to enhance the user experience during data loading periods. It provides a visual placeholder that mimics the structure of the content being loaded, offering a seamless transition and reducing perceived loading times.

$3

| Property | Property description | Property type | Default value | Is required |
| :------------- | :---------------------------------: | :---------------: | :-----------: | :---------: |
| width | width | string or number | 100% | |
| height | height | string or number | 1rem | |
| borderRadius | The border radius style | string or number | 0.25rem | |
| style | Additional styles to add to element | CSSProperties | | |
| className | Overwrite ClassName | classNameOverride | | |

Usage

$3

``JSX
import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';


`

$3

`JSX
import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';


`

$3

`JSX
import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';


`

$3

`JSX
import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';


`

$3

`JSX
import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';

className={{
className: 'item',
cssModule: styles,
retainMissingModuleClasses: true,
}} />
`

For more information about className` please visit packages/utility/functions/src/generateClasses.js