Search results

Shimmer Effects in JavaScript (ES5) Skeleton control

30 Jan 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.

Copied to clipboard
// 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
Copied to clipboard
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');
Copied to clipboard
<!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/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-notifications/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.38/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>
Copied to clipboard
#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;
}