Shimmer effect in EJ2 JavaScript Skeleton control
29 Aug 20235 minutes 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.
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="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-notifications/styles/material.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>