A YUI Loading Panel Widget

Probably needless to say, but here it is. A web page which is processing a lengthy Ajax request and doesn't provide a loading indicator of any kind will mostly mislead the user to think that the page has stopped responding. So the solution? Use a loading indicator of course. Here's a very handy loading indicator widget for Ajax programmers who use YUI.


How to Use

First, create a new instance of loading panel. After that, you can call show or hide method on the loading panel object.

The user can close the loading box by clicking on the cancel link. If you want to handle this situation, you can subscribe to the cancelEvent:


51 Comments A YUI Loading Panel Widget

  1. Steve

    I'd like to ask for some clarifications as I can't get it working and would appreciate some help.

    2. var loadingPanel = new yuiLoadingPanel();


    1. Does this go into , section? I assume it needs to be enclosed into standard JavaScript tags <script., right?

    2. I plugged all code into blank HTML page, into body and nothing happens when I click button. In Firefox, I get an errors:

    YAHOO is not defined
    $D = YAHOO.util.Dom;


    loadingPanel is not defined
    onclick(click clientX=0, clientY=0)

    Do I need to install something else? Thanks.

  2. Cuong


    You need to include YUI library files, which is described in the File section of this post.

    Of course for merely a loading panel, the code above is quite heavy. If you use YUI as your Ajax framework, you will most likely have these files included already. The trade-off now then is just the size of the loadingpanel.js itself, and you can conveniently call loadingPanel.show('bla bla') whenever you need it.

  3. Patrick

    got it...

    change "show function" to this...

    if(text != undefined){
    setTimeout('document.images["Act"].src = "../Images/Activity.gif"', 200);

  4. DDTech


    thanks for the code. I am playing with the panel, using it as a dialog (don't want to use the "Dialog" widget for some reasons in this case).

    I realized that sometimes submit()'s or onClick()'s fire below the mask so I am disabling all buttons after calling the dlg.show().

    However I did not know how to catch if someone cancels the dialog by clicking on "X" as I did not know how to hook onto the hideEvent(). Your code showed me how to subscribe to that event and it works like a charm.



  5. Faster


    Sorry for my English.
    I'm absolutely beginner in ajax.

    I'm using a Ajax loader script in my page.

    I understand that if I use YUI for this script. I must use YUI to load my pages on the site? So my Ajax page loader script is unnecessary?



  6. Cuong

    So my Ajax page loader script is unnecessary?

    I am not sure which Ajax script you are referring to, but if you meant this one, then the answer is no. YUI has already encapsulated this functionality into its library, which is called the Connection Manager.

  7. prince

    Can this loding indicator mask only certain div not the whole body, i think it will be better if this loading indicator will be shown over any element and mask it .. how that thing can be implemented .. ??

  8. Cuong

    I am not sure but I think it's doable. A mask in YUI is simply a semi-transparent DIV which placed above all elements in a page. If you want this mask to cover only certain elements, you have to manually position this mask.

    Go to this URL and take a look the code that has "sizeMask: function ()", you'll see how mask is implemented in YUI. Use style.width, height, left, and top to adjust the mask.

    Untested, good luck.

  9. yeah

    Is there any way i could do this amazing effect without YUI? I mean, using a single js file with all the necessary functions and code to recreate the effect. Thanks.

  10. Pingback: ?????? ??? ??????????? ????????? ???????? ??????? » ??????? » AllAJAX.ru

  11. Pingback: ???? ???????? » ???? ???????

  12. jaxnoob

    Hi, i am a noob at this and would like to use this preloader on my website but dont have a clue to integrate the script to my pages to get it to work, can someone please assist....

    Many thanks

  13. BD-Team

    When i develop my CMS i integrated 3 useful / for me:) / function.
    Sorry my bad english, i' am from hungary.

    There is the modified source code:

    Sample usage:

  14. Pingback: Most Wanted Ajax Techniques: 50+ Ajax Examples and Tutorials | Noupe

  15. Pingback: Most Wanted Ajax Techniques: 50+ Ajax Examples and Tutorials | SulVision

  16. Pingback: Ajaxian » Groups of 50+ Ajax Examples

  17. Pingback: Most Wanted Ajax Techniques « Program2.0

  18. Pingback: +50 Ejemplos en Ajax | ProyectoAurora.com

  19. Pingback: Most Wanted Ajax Techniques: 50+ Examples and Tutorials | SulVision

  20. Pingback: pligg.com

  21. Pingback: Most Wanted Ajax Techniques: 50+ Examples and Tutorials - HackSystems

  22. pyproneCor

    ? ?? ??????? ? ????????????????, ????????????? ????????? ???????. ? ??????? ?? - "??????????????? ????". ?? ??? ??????, ??????? - ??? ???-???? ??????: ??????, ??????, ?????????, ???????????? ????????? ? ??????????. ????? ????? ??????? ?? ????, ?? ??? ?????? - ?? ???? ???????. ????.

  23. Pingback: 50 + Most Useful Ajax Techniques: from Noupe.com « Arunbluebrain’s Flex

  24. Benny

    That code really awesome! Thanks for the code. Anyway, i need to disable the cance link, how to do that? And how to customize the font family/color/size? Any example? Big thanks.

  25. Kamyar

    When I use the code in asp.net, The background goes completely black. I mean it's not working in transparency.
    What am I doing wrong?

  26. Pingback: En Popüler Ajax Eklentileri | FaydalıWeb | Internetin Faydalı Yüzü

  27. Wanderer

    When you click the sample "show me" button here using IE, the loading panel appears and the background screen turns black instead of being transparent, why is that? can you fix that?

  28. Pingback: 100 Essential Web Development Tools - Noupe

  29. Pingback: 100 Essential Web Development Tools | The circuits of imagination

  30. Pingback: 100 Essential Web Development Tools | Best Web Magazine

  31. Pingback: 100 Essential Web Development Tools | Yooxe

  32. Pingback: 100 Essential Web Development Tools » Shai Perednik.com

  33. Pingback: Web 设计与开发终极资源大全(上) - 逆时针's Place

  34. Pingback: Web Development Tools | Kakuss!

  35. Pingback: Web 设计与开发终极资源大全(上) - Lx实验室

  36. Pingback: Web Development Tools - www.taufiqhs.com

  37. Pingback: Web 设计与开发终极资源大全(上) ­ Parazzi

  38. Pingback: [转]Web 设计与开发终极资源大全(上) | G.

  39. Pingback: FlueBox::分享互联网技术和资讯 » Web 设计与开发终极资源大全(上)

  40. Pingback: Web 设计与开发终极资源大全(上) | Crow

  41. Pingback: Web 设计与开发终极资源大全(上) « 菜鸟

  42. Pingback: 100 Essential Web Development Tools « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates

Comments are closed.