ASP.NET Core SkeletonContainer Overview
The SkeletonContainer is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI SkeletonContainer TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI SkeletonContainer widget.
The SkeletonContainer widget indicates to the user that the content is coming but has not yet been loaded. It aims at helping the user focus on progress and makes the page load time appear shorter.
A SkeletonContainer is basically a simplified preview version of a page into which information is gradually loaded (i.e. via AJAX requests).
Initializing the SkeletonContainer
It is recommended to initialize the widget from a div HTML element.
The following example demonstrates how to initialize the SkeletonContainer from an existing <div> element.
@(Html.Kendo().SkeletonContainer()
.Name("skeleton")
.Animation(SkeletonContainerAnimation.Pulse)
.TemplateId("tmpl")
)
<kendo-skeletoncontainer name="skeleton"
animation="SkeletonContainerAnimation.Pulse"
template-id="tmpl">
</kendo-skeletoncontainer>
<script id="tmpl" type="text/html">
<div class='k-card'>
<div class='k-card-header'>
<div>
<span data-shape-circle class='k-card-media avatar'></span>
</div>
<div class='user-info'>
<span data-shape-text class='k-card-title'></span>
<span data-shape-text class='k-card-subtitle'></span>
</div>
</div>
<span data-shape-rectangle style='width: 340px; height: 225px; '></span>
<div class='k-card-body'>
<span data-shape-text></span>
</div>
</div>
</script>
Functionality and Features
The Telerik UI SkeletonContainer for ASP.NET Core accepts either a template or a CSS Grid. While the developer can pass merely anything at the template, the CSS Grid exposes an Item object that has a set of predefined properties. Find out more about the CSS Grid setup here: