Skeleton Loader
SkeletonLoader is used to render loading Skeleton.
Example
Variant
The SkeletonLoader component is in 4 different types: text, rect, circle, multi-line that is accessed with type prop.
Circle
The type circle is a loading that can be used as a circular loader.
Circle loader also take 2 props width and height to create the circle.
Multi Line
The type multiLine is a loading that can be used as a Multi-Line loader.
multi-Line type supports all sizes as text type: 1, 2, 3, 4 which can be accessed using textSize prop.
Number of lines in Multi-Line loader can be managed using multiLines prop.
Addition to this we can manage the width of the loader.
Rect
The type rect is a loading that can be used as a rectangle loader.
Rect loader have 2 props width and height to create the rectangle.
Text
The type text is a loading that can be used as a text loader.
Text loader have 4 different sizes: 1,2,3,4 which can be accessed using textSize prop.
The line-height of the can be managed using the lineHeight prop in pixels as number.
we can generate random width for the text type using the random boolean prop.
Props
| Name | Type | Default |
|---|---|---|
type It is the type of skeleton |
| "text" |
width Frame width as number or a percentage string |
| — |
height Frame height as number or a percentage string |
| — |
textSize Size of the TextLoader |
| 1 |
multiLines No. of Multilines |
| 3 |
lineHeight Line Height of the loader |
| — |
random Generetes random width of text loader is a boolean |
| false |
align Alignment of the loader when width not 100% |
| "left" |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
| * - the prop is required. |