LoaderContainer

1 Answer 51 Views
LoaderContainer
Joel
Top achievements
Rank 2
Iron
Iron
Iron
Joel asked on 29 Nov 2023, 08:13 PM
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.

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 04 Dec 2023, 01:05 PM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Tags
LoaderContainer
Asked by
Joel
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Georgi
Telerik team
Share this question
or