A component that provides a skeleton loading.
npm install @squiz/xaccel-skeleton-loadingThe 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.
| 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 | | |
``JSX
import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';
`
`JSX
import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';
`
`JSX
import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';
`
`JSX
import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';
`
`JSX
import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';
className: 'item',
cssModule: styles,
retainMissingModuleClasses: true,
}} />
`
For more information about className` please visit packages/utility/functions/src/generateClasses.js