Shimmer Effect in ASP.NET Core Skeleton Control

1 Dec 20222 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.

CSHTML

@using Syncfusion.EJ2.Notifications

<ejs-skeleton id="skeleton" shape="Circle" width="60px" shimmerEffect="Pulse"></ejs-skeleton>

Below example demonstrates a list with pulse effect skeleton.

CSHTML

@using Syncfusion.EJ2.Notifications

<ul id="skeleton-list" class="e-card">
    <li>
        <div class="cardProfile">            
            <ejs-skeleton id="skeleton" shape="Circle" width="40px" shimmerEffect="Pulse"></ejs-skeleton>
        </div>
        <div>            
            <ejs-skeleton id="skeleton1" width="60%" height="15px" shimmerEffect="Pulse"></ejs-skeleton><br/>
            <ejs-skeleton id="skeleton2" width="40%" height="15px" shimmerEffect="Pulse"></ejs-skeleton>
        </div>
    </li>
    <li>
        <div class="cardProfile">            
            <ejs-skeleton id="skeleton3" shape="Circle" width="40px" shimmerEffect="Pulse"></ejs-skeleton>
        </div>
        <div>            
            <ejs-skeleton id="skeleton4" width="60%" height="15px" shimmerEffect="Pulse"></ejs-skeleton><br/>
            <ejs-skeleton id="skeleton5" width="40%" height="15px" shimmerEffect="Pulse"></ejs-skeleton>
        </div>
    </li>
</ul>

<style>
    #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;
    }
</style>