SkeletonContainer TagHelper Overview

The Telerik UI SkeletonContainer TagHelper for ASP.NET Core is a server-side wrapper 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).

Telerik UI for ASP.NET Core Ninja image

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.

Initializing the SkeletonContainer

The SkeletonContainer TagHelper configuration options are passed as attributes of the tag.


        <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-image 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>

See Also

In this article
Not finding the help you need? Improve this article