Shimmer effect in React Skeleton component

29 Aug 20236 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 { 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.

index.jsx

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" className="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'));

index.tsx

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" className="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'));

index.css

/* Represents the styles for loader */
#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;
}