Center the Loading Panel on the Screen

Updated on Nov 5, 2025

The code below centers the loading panel on the screen. Note the use of absolute positioning along with Sticky mode of RadAjaxLoadingPanel control.

ASP.NET

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
	<script type="text/javascript">
	    function centerLoadingPanel() {
	        centerElementOnScreen($get("<%= RadAjaxLoadingPanel1.ClientID %>"));
	    }
	    function centerElementOnScreen(element) {
	        var scrollTop = document.body.scrollTop;
	        var scrollLeft = document.body.scrollLeft;
	        var viewPortHeight = document.body.clientHeight;
	        var viewPortWidth = document.body.clientWidth;
	        if (document.compatMode == "CSS1Compat") {
	            viewPortHeight = document.documentElement.clientHeight;
	            viewPortWidth = document.documentElement.clientWidth;
	            if (!$telerik.isSafari) {
	                scrollTop = document.documentElement.scrollTop;
	                scrollLeft = document.documentElement.scrollLeft;
	            }
	        }
	        var topOffset = Math.ceil(viewPortHeight / 2 - element.offsetHeight / 2);
	        var leftOffset = Math.ceil(viewPortWidth / 2 - element.offsetWidth / 2);
	        var top = scrollTop + topOffset - 40;
	        var left = scrollLeft + leftOffset - 70;
	        element.style.position = "absolute";
	        element.style.top = top + "px";
	        element.style.left = left + "px";
	    }
	</script>
</telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
<ClientEvents OnRequestStart="centerLoadingPanel"></ClientEvents>
	<AjaxSettings>
	    <telerik:AjaxSetting AjaxControlID="Button1">
	        <UpdatedControls>
	            <telerik:AjaxUpdatedControl ControlID="Panel1" />
	        </UpdatedControls>
	    </telerik:AjaxSetting>
	</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" IsSticky="true">
	<img src="loading.gif" alt="loading.." />
</telerik:RadAjaxLoadingPanel>
<asp:Button ID="Button1" runat="server" Text="AJAX" OnClick="Button1_Click" />
<asp:Panel ID="Panel1" runat="server" Style="width: 800px; height: 400px; border: 1px solid red">
	asp:Panel
</asp:Panel>

When Skin is set for the RadAjaxLoadingPanel, you can center it on the page as follows.

ASP.NET

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista"
IsSticky="true" Style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;">
</telerik:RadAjaxLoadingPanel>