Search results

Shimmer Effects in React Skeleton component

02 Feb 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 { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";

function App() {

  return (
    <SkeletonComponent shape= 'Circle' width= "60px" shimmerEffect= 'Pulse'></SkeletonComponent>);
}
export default App;

Below example demonstrates a list with pulse effect skeleton.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import * as ReactDOM from 'react-dom';
function App() {
    return (<div>
      <ul id="skeleton-list" class="e-card">
          <li>
              <div className='cardProfile'>
                  <SkeletonComponent shape="Circle" width="40px" shimmerEffect='Pulse'></SkeletonComponent>
              </div>
              <div>
                  <SkeletonComponent width="60%" height='15px' shimmerEffect='Pulse'></SkeletonComponent><br></br>
                  <SkeletonComponent width="40%" height='15px' shimmerEffect='Pulse'></SkeletonComponent>
              </div>
          </li>
          <li>
              <div className='cardProfile'>
                  <SkeletonComponent shape="Circle" width="40px" shimmerEffect='Pulse'></SkeletonComponent>
              </div>
              <div>
                  <SkeletonComponent width="60%" height='15px' shimmerEffect='Pulse'></SkeletonComponent><br></br>
                  <SkeletonComponent width="40%" height='15px' shimmerEffect='Pulse'></SkeletonComponent>
              </div>
          </li>
      </ul>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 React Skeleton Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>
Copied to clipboard
#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;
}

.cardProfile {
  float: left;
  margin-right: 15px;
}
Copied to clipboard
import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import * as ReactDOM from 'react-dom';

function App() {

  return (
    <div>
      <ul id="skeleton-list" class="e-card">
          <li>
              <div className='cardProfile'>
                  <SkeletonComponent shape="Circle" width="40px" shimmerEffect='Pulse'></SkeletonComponent>
              </div>
              <div>
                  <SkeletonComponent width="60%" height='15px' shimmerEffect='Pulse'></SkeletonComponent><br></br>
                  <SkeletonComponent width="40%" height='15px' shimmerEffect='Pulse'></SkeletonComponent>
              </div>
          </li>
          <li>
              <div className='cardProfile'>
                  <SkeletonComponent shape="Circle" width="40px" shimmerEffect='Pulse'></SkeletonComponent>
              </div>
              <div>
                  <SkeletonComponent width="60%" height='15px' shimmerEffect='Pulse'></SkeletonComponent><br></br>
                  <SkeletonComponent width="40%" height='15px' shimmerEffect='Pulse'></SkeletonComponent>
              </div>
          </li>
      </ul>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));