showing the loading animation from javascript

5 posts, 0 answers
  1. mirang
    mirang avatar
    115 posts
    Member since:
    Aug 2010

    Posted 20 Jan 2012 Link to this post

    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.
  2. Juan
    Juan avatar
    6 posts
    Member since:
    Jan 2011

    Posted 08 Nov 2012 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 13 Nov 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Juan
    Juan avatar
    6 posts
    Member since:
    Jan 2011

    Posted 13 Nov 2012 Link to this post

    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.
  6. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 16 Nov 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017