Search results

Shimmer Effects in JavaScript Skeleton control

25 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
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.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
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');
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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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>
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;
}