Getting Started with the Loader

This tutorial explains how to set up a basic Telerik UI for ASP.NET MVC 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.

Prerequisites

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

• To create a new pre-configured project for the Telerik UI for ASP.NET MVC components, you can use a project template.

• To manually configure an existing project by using NuGet, see the Adding Telerik UI through NuGet.

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 MVC HtmlHelpers:

  @using Kendo.Mvc.UI
  

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>

2. Initialize the Loader

Use the Loader HtmlHelper 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)
    )

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>
   

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

Next Steps

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

See Also

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

• Server-Side API of the Loader

• Knowledge Base Section