Shapes in ASP.NET MVC Skeleton Control

6 Dec 20223 minutes to read

The Skeleton control support various built-in shape variants to design layout of the page. You can use the Shape property to create a preview of any layout.

The Skeleton control supports the following content shapes:

Circle skeleton shape

CSHTML

@using Syncfusion.EJ2.Notifications

@Html.EJS().Skeleton("skeleton").Shape(SkeletonType.Circle).Width("48px").Render()

CircleShape.cs

public ActionResult Circle()
{
    return View();
}

Square skeleton shape

CSHTML

@using Syncfusion.EJ2.Notifications

@Html.EJS().Skeleton("skeleton").Shape(SkeletonType.Square).Width("48px").Render()

SquareShape.cs

public ActionResult Square()
{
    return View();
}

Rectangle skeleton shape

CSHTML

@using Syncfusion.EJ2.Notifications

@Html.EJS().Skeleton("skeleton").Shape(SkeletonType.Rectangle).Height("50px").Render()

RectangleShape.cs

public ActionResult Rectangle()
{
    return View();
}

Text skeleton shape

CSHTML

@using Syncfusion.EJ2.Notifications

@Html.EJS().Skeleton("skeleton").Shape(SkeletonType.Text).Height("15px").Render()

TextShape.cs

public ActionResult Text()
{
    return View();
}

Below example demonstrates the above functionalities of a Skeleton control.

CSHTML

@using Syncfusion.EJ2.Notifications

<div id="skeletonCard">
    <div class='cardProfile'>
        @Html.EJS().Skeleton("skeleton").Shape(SkeletonType.Circle).Width("60px").Render()
    </div>
    <div class="cardinfo">
        @Html.EJS().Skeleton("skeleton1").Width("30%").Height("15px").Render()<br/>
        @Html.EJS().Skeleton("skeleton2").Width("15%").Height("15px").Render()
    </div>
    <div class="cardContent">
        @Html.EJS().Skeleton("skeleton3").Shape(SkeletonType.Rectangle).Width("100%").Height("150px").Render()
    </div>
    <div class="cardoptions">
        @Html.EJS().Skeleton("skeleton4").Shape(SkeletonType.Rectangle).Width("20%").Height("32px").Render()
        @Html.EJS().Skeleton("skeleton5").Shape(SkeletonType.Rectangle).Width("20%").Height("32px").Render()
    </div>
</div>

<style>
    #skeletonCard {
        padding: 10px;
        line-height: inherit;
        height: 330px;
    }

    #skeletonCard .cardProfile {
        float: left;
        margin-right: 15px;
    }

    #skeletonCard .cardinfo {
        margin-top: 10px;
        overflow: hidden;
    }

    #skeletonCard .cardContent {
        margin: 20px 0px 20px;
    }

    #skeletonCard .cardoptions {
        display: flex;
        justify-content: space-between;
    }
</style>

Shape.cs

public ActionResult Shape()
{
    return View();
}