Shimmer Effect in ASP.NET MVC Skeleton

21 Aug 20262 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.

@using Syncfusion.EJ2.Notifications

@Html.EJS().Skeleton("skeleton").Shape(SkeletonType.Circle).Width("60px").ShimmerEffect(ShimmerEffect.Pulse).Render()
public ActionResult PulseEffect()
{
    return View();
}

ASP.NET MVC Skeleton Pulse Effect

Below example demonstrates a list with pulse effect skeleton.

@using Syncfusion.EJ2.Notifications

<ul id="skeleton-list" class="e-card">
    <li>
        <div class='cardProfile'>            
            @Html.EJS().Skeleton("skeleton").Shape(SkeletonType.Circle).Width("40px").ShimmerEffect(ShimmerEffect.Pulse).Render()
        </div>
        <div>
            @Html.EJS().Skeleton("skeleton1").Width("60%").Height("15px").ShimmerEffect(ShimmerEffect.Pulse).Render()<br />
            @Html.EJS().Skeleton("skeleton2").Width("40%").Height("15px").ShimmerEffect(ShimmerEffect.Pulse).Render()
        </div>
    </li>
    <li>
        <div class='cardProfile'>            
            @Html.EJS().Skeleton("skeleton3").Shape(SkeletonType.Circle).Width("40px").ShimmerEffect(ShimmerEffect.Pulse).Render()
        </div>
        <div>
            @Html.EJS().Skeleton("skeleton4").Width("60%").Height("15px").ShimmerEffect(ShimmerEffect.Pulse).Render()<br />
            @Html.EJS().Skeleton("skeleton5").Width("40%").Height("15px").ShimmerEffect(ShimmerEffect.Pulse).Render()
        </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>
public ActionResult Effect()
{
    return View();
}

ASP.NET MVC Skeleton Pulse Effect