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/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://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>