Shapes in React Skeleton component

20 Feb 20266 minutes to read

The Skeleton component supports multiple shape variants that enable you to create skeletal previews matching your content layout. Use the shape property to display placeholder loading states for different content types. Shape selection affects both visual appearance and perceived loading context, helping users understand what content is loading.

Available skeleton shapes

The Skeleton component supports four shape types:

Circle

Circular shapes are ideal for avatar placeholders, profile images, or circular icon areas. Use circle skeletons to represent round content containers or profile photos loading.

Square

Square shapes work well for small icon placeholders, thumbnails, or uniform grid items. Square skeletons provide balanced proportions for compact content areas.

Rectangle

Rectangular shapes accommodate standard content areas such as images, cards, or text blocks. Rectangles are the most versatile shape for various layout patterns and content sizes.

Text

Text shapes create horizontal line placeholders representing text content or headlines. Text skeletons help users anticipate paragraph or heading loading, providing clear visual indication of text-based content flow.

Shape usage examples

The following example demonstrates implementing various skeleton shapes:

index.jsx

import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import * as ReactDOM from 'react-dom';
function App() {
    return (<div>
        <div id="skeletonCard">
            <div className='cardProfile'>
                <SkeletonComponent id='cardProfile' shape='Circle' width="60px"></SkeletonComponent>
            </div>
            <div className="cardinfo">
                <SkeletonComponent id="text1" width="30%" height='15px'></SkeletonComponent><br />
                <SkeletonComponent id="text2" width="15%" height='15px'></SkeletonComponent>
            </div>
            <div className="cardContent">
                <SkeletonComponent id="cardImage" shape="Rectangle" width="100%" height='150px'></SkeletonComponent>
            </div>
            <div className="cardoptions">
                <SkeletonComponent id="rightOption" shape="Rectangle" width="20%" height='32px'></SkeletonComponent>
                <SkeletonComponent id="leftOption" shape="Rectangle" width="20%" height='32px'></SkeletonComponent>
            </div>
        </div>
      </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import * as ReactDOM from 'react-dom';

function App() {

    return (
      <div>
        <div id="skeletonCard">
            <div className='cardProfile'>
                <SkeletonComponent id='cardProfile' shape= 'Circle' width= "60px"></SkeletonComponent>
            </div>
            <div className="cardinfo">
                <SkeletonComponent id="text1" width="30%" height='15px'></SkeletonComponent><br/>
                <SkeletonComponent id="text2" width="15%" height='15px'></SkeletonComponent>
            </div>
            <div className="cardContent">
                <SkeletonComponent id="cardImage" shape="Rectangle" width="100%" height='150px'></SkeletonComponent>
            </div>
            <div className="cardoptions">
                <SkeletonComponent id="rightOption" shape="Rectangle" width="20%" height='32px'></SkeletonComponent>
                <SkeletonComponent id="leftOption" shape="Rectangle" width="20%" height='32px'></SkeletonComponent>
            </div>
        </div>
      </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.css

/* Represents the styles for loader */
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

#skeletonCard {
	padding: 10px;
	line-height: inherit;
	height: 330px;
}

#skeletonCard .cardProfile {
	float: left;
	margin-right: 15px;
}

#skeletonCard .cardinfo {
	margin-top: 10px;
	overflow: hidden;
}

#skeletonCard .cardContent {
	margin: 20px 0px 20px;
}

#skeletonCard .cardoptions {
	display: flex;
	justify-content: space-between;
}