Skeleton styling and customization

20 Feb 20262 minutes to read

The Skeleton component provides flexible styling options to match your application’s design requirements. Customize the visual appearance of skeleton placeholders to align with your brand colors, layout patterns, and component hierarchy.

Custom styling with cssClass

Apply custom CSS styling to Skeleton components using the cssClass property. This approach enables you to modify visual properties such as shimmer wave color, background color, dimensions, and animation speed. CSS customization provides fine-grained control over skeleton appearance across your application.

index.jsx

import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import * as ReactDOM from 'react-dom';
function App() {
    return (<SkeletonComponent shape='Circle' width="60px" cssClass='e-customize'></SkeletonComponent>);
}
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 (
    <SkeletonComponent shape= 'Circle' width= "60px" cssClass='e-customize'></SkeletonComponent>);
}
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%;
}

/* Represents the styles for shimmer-wave */
.e-customize.e-skeleton.e-shimmer-wave::after{
  background-image: linear-gradient(90deg, transparent calc(50% - 100px), 
  rgb(30 128 234 / 50%) 50%, 
  transparent calc(50% + 100px));
}
/* Represents the background-color for skeleton-circle */
.e-customize.e-skeleton.e-skeleton-circle{
  background-color: #a8c1f2;
}

Visibility control

Control the display state of Skeleton components using the visible property. Set visible to true to display the skeleton placeholder during loading, and change to false when content finishes loading and should be displayed. This property enables dynamic skeleton toggling based on content loading state, allowing you to seamlessly transition from placeholder to actual content without requiring component replacement.