Shimmer effect in React Skeleton component

20 Feb 20266 minutes to read

Shimmer effects provide animated visual feedback during content loading, signaling to users that the application is actively retrieving content. Configure the animation style using the shimmerEffect property. The Skeleton component supports three shimmer effect types: Wave (default), Pulse, and Fade. Each effect creates a different visual impression while conveying the same “loading” message.

Effect types

The Skeleton component supports the following shimmer effects:

• Wave (default) - Creates a flowing wave animation across the skeleton, mimicking scanning motion
• Pulse - Creates a uniform fading in and out animation, simulating breathing or pulsing content
• Fade - Creates a gradual fade animation, providing subtle visual feedback

Example

The following 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;
}