Loader Components as a Loading/Processing Container

[Andrew]

How do use the Loader as a Loading Container so it covers the whole UI with a transparent overlay 

 

@(Html.Kendo().Loader()
    .Name("loader")
    .Size(LoaderSize.Large)
    .Type(LoaderType.ConvergingSpinner)
    )

 

[Andrew]

got it working

 

<div id="loader-overlay" class="loader-overlay">
    @(Html.Kendo().Loader()
        .Name("loader")
        .Size(LoaderSize.Large)
        .Type(LoaderType.ConvergingSpinner)
        )
</div>

.loader-overlay
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Ensure it's above other elements */
    display: none; /* Hide initially */
}

.k-loader
{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}