blazor-docs/knowledge-base/loader-container-center-in-viewport.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
Center LoaderContainer in Viewport	How to center the LoaderContainer in viewport	how-to	Center LoaderContainer in the Browser Viewport	loader-container-kb-center-in-viewport		loadercontainer, center, viewport, long, page	1564614	kb

Environment

Product

LoaderContainer for Blazor

Description

When the page is longer than the viewport, the TelerikLoaderContainer is not always visible. It is displayed in the center of the page as a whole, not in the center of the browser's viewport. So, if the user is at the top or bottom of the page they won't see the loader animation.

How to display the LoaderContainer in the center of the viewport?

Solution

Use custom CSS to override the LoaderContainer position style to fixed. This will center the component in respect to the whole page width.

In addition, you may also adjust the position of the inner container - the one that holds the text and the animation. Thus, you can center it in respect to the "main" element and not the whole page.

The example below demonstrates the suggested approach. Uncomment the second styles portion to see the difference.

@* Center the LoaderContainer in the viewport *@

<style>
    .customized-loader-container.k-loader-container {
        position: fixed;
    }

    /* .customized-loader-container .k-loader-container-inner {
        left: 7%;
    }*/
</style>

<div style="height:2000px; background-color:beige;"> Some long div </div>

<TelerikLoaderContainer Class="customized-loader-container" Visible="true" Text="Please wait..." />