Getting Started with the Loader

This tutorial explains how to set up a basic Telerik UI for ASP.NET Core Loader and highlights the major steps in the configuration of the component.

You will initialize a Loader component with a predefined type, size, and theme color. Next, you will learn how to get a reference to the Loader's client-side instance and control its behavior. Finally, you can run the sample code in Telerik REPL and continue exploring the components.

Prerequisites

To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET Core components:

• You can use the Telerik REPL playground and skip installing the components on your system and configuring a project.

• You can prepare a Visual Studio project by following either of these guides:

  • Creating a new pre-configured project for the Telerik UI for ASP.NET Core components from a project template.

  • Manually configuring an existing project as described in the First Steps on Windows or First Steps on Mac articles.

1. Prepare the CSHTML File

The first step is to add the required directives at the top of the .cshtml document:

• To use the Telerik UI for ASP.NET Core HtmlHelpers:

  @using Kendo.Mvc.UI
  

• To use the Telerik UI for ASP.NET Core TagHelpers:

  @addTagHelper *, Kendo.Mvc
  

Optionally, you can structure the document by adding the desired HTML elements like headings, divs, and paragraphs.

    @using Kendo.Mvc.UI
    <h4>Loader</h4>
    <div>

    </div>

    @addTagHelper *, Kendo.Mvc
    <h4>Loader</h4>
    <div>

    </div>

2. Initialize the Loader

Use the Loader HtmlHelper or TagHelper to add the component to a page.

• The Name() configuration method is mandatory as its value is used for the id and the name attributes of the Loader element.

• The Type() option allows you to set the animation type of the component.

• You can use the Size() method to select a predefined size for the Loader.

• The ThemeColor() option specifies the component color based on the used Kendo UI theme.

    @(Html.Kendo().Loader()
        .Name("loader")
        .Type(LoaderType.InfiniteSpinner)
        .Size(LoaderSize.Large)
        .ThemeColor(LoaderThemeColor.Primary)
    )

    <kendo-loader name="loader"
        type="LoaderType.InfiniteSpinner" 
        size="LoaderSize.Large" 
        themeColor="LoaderThemeColor.Primary">
    </kendo-loader>

3. (Optional) Reference Existing Loader Instances

You can reference the Loader instances that you have created and build on top of their existing configuration:

1. Use the .Name() (id attribute) of the component instance to get a reference.

        <script>
            $(document).ready(function() {
                var loaderReference = $("#loader").data("kendoLoader"); // loaderReference is a reference to the existing Loader instance of the helper.
            })
        </script>
   

2. Use the Loader client-side API to control the behavior of the Loader. In this example, you will hide the Loader by using the hide() client-side method.

       @(Html.Kendo().Button()
           .Name("btn")
           .Content("Hide the Loader")
           .Events(ev => ev.Click("onBtnClick")))
   
       <script>
           function onBtnClick() {
               var loaderReference = $("#loader").data("kendoLoader"); // loaderReference is a reference to the existing Loader instance of the helper.
               loaderReference.hide(); // Hide the Loader.
           }
       </script>
   

       @addTagHelper *, Kendo.Mvc
   
       <kendo-button name="btn" on-click="onBtnClick">
           Hide the Loader
       </kendo-button>
   
       <script>
           function onBtnClick() {
               var loaderReference = $("#loader").data("kendoLoader"); // loaderReference is a reference to the existing Loader instance of the helper.
               loaderReference.hide(); // Hide the Loader.
           }
       </script>
   

For more information on referencing specific helper instances, see the Methods and Events article.

Explore this Tutorial in REPL

You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:

• Sample code with the Loader HtmlHelper
• Sample code with the Loader TagHelper

Next Steps

• Customizing the Appearance of the Loader
• Integration with other components

See Also

• Loader Color Variations ASP.NET Core (Demo)
• Client-Side API of the Loader

• Server-Side API of the Loader

• Server-Side TagHelper API of the Loader

• Knowledge Base Section