LoaderContainer

[Joel]

I have the following TelerikLoaderContainer definition with a custom GIF:

        <TelerikLoaderContainer Visible="@IsBusy">
            <Template>
                <div style="background:white;color:black;padding:1em;">

                    <img src="/images/IsBusyV1.gif"
                         width="100" height="100" alt="loading animation" />

                </div>
            </Template>
        </TelerikLoaderContainer>

When the value IsBusy runs, I see my gif inside a small white box.  Instead, I'd like to change the "gray" color that, I assume, is defined by changing the zindex layer's transparency value to a lesser value.  

How do I change this to show just the IsBusy.gif?  E.g. I don't want the background to be "gray" or I want to change it to a different "light gray" value when it runs.

[Georgi]

Hi, Joel,

Thank you for the provided code snippet!

Based on the provided information, I understand you would like to change the opacity of the overlay that covers the whole page when a Loader Container appears. Is this correct?

If so, you can use a custom CSS selector to style the overlay like this:

<TelerikLoaderContainer Class="custom" Visible="@IsVisible" Text="Please wait..." />

<style>
    .custom > .k-loader-container-overlay {
        opacity: 0;
    }
</style>

By default, the opacity is set to 0.5. You can set it to 0 if you want it to be transparent.

Kind regards,
Georgi
Progress Telerik