Having trouble getting help?
Contact Support
Contact Support
Shimmer effect in EJ2 TypeScript 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.
import { Skeleton } from '@syncfusion/ej2-notifications';
// Initialize Skeleton control with wave effect
let pulse: Skeleton = new Skeleton({
shape: 'Circle',
width: "60px",
shimmerEffect: 'Pulse'
});
// Render initialized Skeleton.
pulse.appendTo('#pulseSkeleton');
Below example demonstrates a list with pulse effect skeleton.
import { Skeleton } from '@syncfusion/ej2-notifications';
// Initialize Skeleton control
let listProfile: Skeleton = new Skeleton({
shape: 'Circle',
width: '40px',
height: '40px',
shimmerEffect: 'Pulse'
});
// Render initialized Skeleton.
listProfile.appendTo('#listProfile');
let listProfile1: Skeleton = new Skeleton({
shape: 'Circle',
width: '40px',
height: '40px',
shimmerEffect: 'Pulse'
});
listProfile1.appendTo('#listProfile1');
let listCtn: Skeleton = new Skeleton({
width: '60%',
height: '15px',
shimmerEffect: 'Pulse'
});
listCtn.appendTo('#listCtn');
let listCtn1: Skeleton = new Skeleton({
width: '60%',
height: '15px',
shimmerEffect: 'Pulse'
});
listCtn1.appendTo('#listCtn1');
let distCtn: Skeleton = new Skeleton({
width: '40%',
height: '15px',
shimmerEffect: 'Pulse'
});
distCtn.appendTo('#distCtn');
let distCtn1: Skeleton = new 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/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-notifications/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<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>
</body>
</html>