Shimmer Effects in JavaScript (ES5) Skeleton control

08 May 2023 / 1 minute to read

You can use the shimmerEffect property to change animation effect in the skeleton control. Skeleton supports Wave, Pulse and Fade effects and by default, the shimmerEffect is set to Wave effect.

// Initialize Skeleton control with pulse effect
var pulse = ej.notifications.Skeleton({
    shape: 'Circle',
    width: "60px",
    shimmerEffect: 'Pulse'
});

// Render initialized Skeleton.
pulse.appendTo('#pulseSkeleton');

Below example demonstrates a list with pulse effect skeleton.

Source

Preview

index.js

index.html

styles.css

ej.base.enableRipple(true);

// Initialize Skeleton control
var listProfile = new ej.notifications.Skeleton({
    shape: 'Circle',
    width: '40px',
    height: '40px',
    shimmerEffect: 'Pulse'
});

// Render initialized Skeleton.
listProfile.appendTo('#listProfile');

var listProfile1 = new ej.notifications.Skeleton({
    shape: 'Circle',
    width: '40px',
    height: '40px',
    shimmerEffect: 'Pulse'
});

listProfile1.appendTo('#listProfile1');

var listCtn = new ej.notifications.Skeleton({
    width: '60%',
    height: '15px',
    shimmerEffect: 'Pulse'
});

listCtn.appendTo('#listCtn');

var listCtn1 = new ej.notifications.Skeleton({
    width: '60%',
    height: '15px',
    shimmerEffect: 'Pulse'
});

listCtn1.appendTo('#listCtn1');

var distCtn = new ej.notifications.Skeleton({
    width: '40%',
    height: '15px',
    shimmerEffect: 'Pulse'
});

distCtn.appendTo('#distCtn');

var distCtn1 = new ej.notifications.Skeleton({
    width: '40%',
    height: '15px',
    shimmerEffect: 'Pulse'
});

distCtn1.appendTo('#distCtn1');

<!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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <ul id="skeleton-list" class="e-card">
            <li>
                <div id="listProfile"></div>
                <div>
                    <div id="listCtn"></div><br>
                    <div id="distCtn"></div>
                </div>
            </li>
            <li>
                <div id="listProfile1"></div>
                <div>
                    <div id="listCtn1"></div><br>
                    <div id="distCtn1"></div>
                </div>
            </li>
        </ul>
    </div>


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

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

#skeleton-list {
  padding-left: 12px;
  padding-top: 7px;
  line-height: inherit;
}

#skeleton-list li {
  list-style: none;
  display: flow-root;
  margin-bottom: 9px;
}

#listProfile, 
#listProfile1 {
  float: left;
  margin-right: 15px;
}