Styles in EJ2 JavaScript Skeleton control

29 Aug 20232 minutes to read

You can customize skeleton control in the below ways.


You can customize the style of a Skeleton control by using cssClass. The appearance of JavaScript Skeleton can be customized by changing the wave color, background color, width, and height. For detailed information, refer styles.css file below.


// Initialize Skeleton control
var circle = new ej.notifications.Skeleton({
    shape: 'Circle',
    width: "60px",
    cssClass: 'e-customize'

// Render initialized Skeleton.
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Skeleton</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="" rel="stylesheet">
    <link href="" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
<script src="" type="text/javascript"></script>
<script src="" type ="text/javascript"></script>

    <div id="container">
        <div style="position:relative;min-height:310px;border:1px solid; padding:20px;">
            <div id="circleSkeleton"></div>

var ele = document.getElementById('container');
if(ele) { = "visible";
<script src="index.js" type="text/javascript"></script>


You can use the visible property which defines the visible state of Skeleton.

// Initialize Skeleton control in hidden state
var circle: Skeleton = new ej.notifications.Skeleton({
    shape: 'Circle',
    width: "60px",
    visible: false

// Render initialized Skeleton