New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebfForms AjaxLoadingPanel Overview

  • Demo Configurator
Loading Image Position
Center
Transparency

A RadAjaxLoadingPanel shows a loading image as a progress indication when an AJAX request is performed, i.e., when the page is loading silently. This improves the look and feel of the page so there are no sudden changes and unnecessary flickering. You can set your own picture as a loading image by supplying the path to your own image in the loading panel definition.

About RadAjaxLoadingPanel for ASP.NET AJAX

RadAjaxLoadingPanel supports skinning and you can change its skin by setting the Skin property to the name of the respective skin. A BackgroundPosition property enables you to position the loading image in the loading panel. The EnableSkinTransparency property allows you to enable/disable default skin transparency.

Key Features

  • Supports customizing delay time and minimal display time
  • Supports configuring transparency
  • Supports using custom skins
  • Explicit show and hide
More about RadAjaxLoadingPanel
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.AjaxLoadingPanel.Overview.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel2"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadAjaxLoadingPanel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel2"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <asp:Panel ID="Panel1" runat="server" Height="380px" CssClass="background1">
            <telerik:RadButton RenderMode="Lightweight" ID="Button2" runat="server" Text="Click to see the loading image" OnClick="Button2_Click"></telerik:RadButton>            
        </asp:Panel>       
        
         <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
         <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Transparency="70">
        </telerik:RadAjaxLoadingPanel>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator" Expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow" Title="Loading Image Position">
                    <qsf:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Size="Medium">
                        <Items>
                            <telerik:DropDownListItem runat="server" Text="Bottom" Value="Bottom" />
                            <telerik:DropDownListItem runat="server" Text="BottomLeft" Value="BottomLeft" />
                            <telerik:DropDownListItem runat="server" Text="BottomRight" Value="BottomRight" />
                            <telerik:DropDownListItem runat="server" Text="Center" Value="Center" Selected="True" />
                            <telerik:DropDownListItem runat="server" Text="Left" Value="Left" />
                            <telerik:DropDownListItem runat="server" Text="None" Value="None" />
                            <telerik:DropDownListItem runat="server" Text="Right" Value="Right" />
                            <telerik:DropDownListItem runat="server" Text="Top" Value="Top" />
                            <telerik:DropDownListItem runat="server" Text="TopLeft" Value="TopLeft" />
                            <telerik:DropDownListItem runat="server" Text="TopRight" Value="TopRight" />
                        </Items>
                    </qsf:DropDownList>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn runat="server" Size="Medium" Title="Transparency">

                    <asp:CheckBox ID="CheckBox1" runat="server" Text="Enable Background Transparency" Checked="false"
                        AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox><br />
                    <br />
                    <asp:Panel runat="server" ID="TransparencyPanel">
                        <qsf:NumericTextBox ID="RadNumericTextBox1" runat="server" MinValue="1" MaxValue="100" Value="30" Size="Narrow" WrapperCssClass="transparencyTextBox" Visible="false">
                            <NumberFormat DecimalDigits="0"></NumberFormat>
                        </qsf:NumericTextBox>

                        <qsf:Button ID="Button1" runat="server" Text="Set value" OnClick="Button1_Click" Size="Narrow" Visible="false"></qsf:Button>
                    </asp:Panel>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance