showing the loading animation from javascript

[mirang]

Is there any way we can show the loading animation, which comes during load on demand, through javascript functions. My requirement is to create nodes at the client side and during that time wanted to show the same loading animation icon while the nodes are geting created in the javascript function.

[Juan]

I need exactly the same thing and I found this post searching through the forum.

What I need is to display the exact same waiting animation that the RadWindow displays when loading content (see attached file) and I need to do it dynamically with javascript at any moment (I cannot rely on the existence of any Telerik control on the current page).

It seems the animation is a complex mix of CSS and javascript so I was hoping someone from telerik could save us to reverse engineer it and provide a solution. Doing that will make not one but two customers happy (may be many many more).

This is what I have so far:

function ShowLoadingMessage() {
    //TODO: create a better looking popup
    var div = document.createElement("div");
    div.id = "loading";
    div.style.background = "url(Images/loading7.gif) no-repeat center";
    div.style.backgroundColor = "White";
    div.style.backgroundRepeat = "none";
    div.style.border = "3px solid Green";
    div.style.width = "81px";
    div.style.height = "21px";
    div.style.textAlign = "center";
    div.style.margin = "auto";
    div.style.padding = "5px";
    //div.innerHTML = "Loading ...";

    // Here you should center the div somehow

    document.body.appendChild(div);
}

Thanks in advance

[Plamen]

Hi Juan,

 
The scenario you are trying to achieve is not quite clear- would you please elaborate a little bit where exactly are you trying to position this image and when the function you shared is supposed to be executed.

Regards,
Plamen
the Telerik team

[Juan]

Hello Plamen, thanks for responding and sorry if I wasn't very clear.

When you open a RadWindow with ShowContentDuringLoad="false" you see a centered Loading animation. In the next example select the Office 2007 skin and load the page, on the left RadWindow you'll see the animation I'm talking about:

http://demos.telerik.com/aspnet-ajax/window/examples/showcontentduringload/defaultcs.aspx

Well, I would like to display THAT animation at any moment from javascript (without the RadWindow, of course). I just want to display a "Loading animation" from client side on any page and I would like to be the same animation the user sees on Telerik controls just for "UI consistency". 

If the loading animation was an animated .gif, I would just use it as a bakground image of a div and then create the div on the fly and display it on the screen when a JS function is called (the function of my last post was about this). The problem is that I've noticed that the Telerik animation is a somehow complex mix of CSS and javascript that generates a on the fly DOM structure that is displayed on screen (same idea but more complex) and I was hoping that maybe you guys already have this scenario addressed and could save me of spending 3 hours of reverse engineering this. Maybe there is already a client side function for this? I hope so.

Thanks in advance.

Juan.

[Plamen]

Hello Juan,

 
Unfortunately we have no ready answer for such issue but you can refer to this KB article where similar functionality have been explained and may be helpful for your case as well. 

As for the images -you can get them from the following directory-C:\Program Files (x86)\Telerik\RadControls for ASP.NET AJAX Q3 2012\Skins\Office2007\Common.

Hope this will be helpful.

Kind regards,
Plamen
the Telerik team