Skeleton Loader

SkeletonLoader is used to render loading Skeleton.

Example

Live Editor

<SkeletonLoader type="multi-line" width="50%" />

Result

Loading...

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.

Live Editor

<SkeletonLoader type="circle" width={100} height={100} />

Result

Loading...

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.

Live Editor

<div style={{ width: '50%' }}>
  <SkeletonLoader type="multi-line" textSize={1} multiLines={5} />
  <br />
  <br />
  <SkeletonLoader type="multi-line" textSize={2} multiLines={4} />
</div>

Result

Loading...

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.

Live Editor

<SkeletonLoader type="rect" width={100} height={100} />

Result

Loading...

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.

Live Editor

<div style={{ width: '50%' }}>
  <SkeletonLoader type="text" textSize={1} />
  <SkeletonLoader type="text" textSize={2} />
  <SkeletonLoader type="text" textSize={3} />
  <SkeletonLoader type="text" textSize={4} />
</div>

Result

Loading...

The line-height of the can be managed using the lineHeight prop in pixels as number.

Live Editor

<div style={{ width: '50%' }}>
  <SkeletonLoader type="text" textSize={1} lineHeight={64} />
  <SkeletonLoader type="text" textSize={2} />
  <SkeletonLoader type="text" textSize={3} />
</div>

Result

Loading...

we can generate random width for the text type using the random boolean prop.

Live Editor

<div style={{ width: '50%' }}>
  <SkeletonLoader type="text" textSize={1} random />
  <SkeletonLoader type="text" textSize={2} />
  <SkeletonLoader type="text" textSize={3} />
</div>

Result

Loading...

Props

Name	Type	Default
type It is the type of skeleton	"circle" | "rect" | "text" | "multi-line"	"text"
width Frame width as number or a percentage string	number	—
height Frame height as number or a percentage string	number	—
textSize Size of the TextLoader	1 | 2 | 3 | 4	1
multiLines No. of Multilines	number	3
lineHeight Line Height of the loader	number	—
random Generetes random width of text loader is a boolean	boolean	false
align Alignment of the loader when width not 100%	"left" | "right" | "center"	"left"
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.