YUI Widget: Loading Mask - Documentation


The Loading Mask widget will hide all the page's content until the onLoad's event, which mean that the website will not be displayed until the current page be fully loaded. Also this widget can be used in conjunction with the YUI Connection Manager to block the actions over the page until the AJAX's request finish.


  • The loading mask will be displayed immediately at the beginning
  • The loading mask can be reconfigured at any time
  • The message's area (Loading, please wait...) is "fixed center" by default
  • The loading mask will control the resize window's events
  • The loading mask will hide the scroll bars until the onLoad event
  • The loading mask can be hiding if you click on it.
  • The loading mask can be displayed or hide at any momement after the onLoad event
  • The loading mask was designed to work with the YUI connection manager (show the mask before beginning the transaction, and hide it in the callback functions)


<!-- Dependency source files (put these on the head tag) -->
<script src="http://yui.yahooapis.com/2.3.1/build/yahoo/yahoo-min.js"> </script>
<script src="http://yui.yahooapis.com/2.3.1/build/dom/dom-min.js"> </script>
<script src="http://yui.yahooapis.com/2.3.1/build/event/event-min.js"> </script> <!-- this one is optional //--> <script src="http://yui.yahooapis.com/2.3.1/build/animation/animation-min.js"> </script>
<script src="/yui-cms/build/bubbling/bubbling.js"> </script>


<div id="yui-cms-loading">
<div id="yui-cms-float">
Loading, please wait...
<script src="../../../yui-cms/build/loading/loading-min.js"></script>
<!-- Put the rest of the scripts here... after the loading widget inclusion //--> <!-- Page's content here //--> </body>

Customization (optional):

<script type="text/javascript">
//configuring the loading mask
effect: true, // default: false
opacity: 0.9 // default: 1
autodismissdelay: 0, // default: 0 (none)
closeOnDOMReady: false,
closeOnLoad: true


<style type="text/css">
#yui-cms-loading {
background:#FFFFFF; // mask background color color: #333333;
display: none; // hidden by default
#yui-cms-loading #yui-cms-float {
text-align: center;
font-size: 80%;
background-image: url(../images/loading.gif);
background-position: top;
padding-top: 20px;

See the API Docs at full screen in a new window:


No Comment yet

Bubbling for YUI 3.x

Dispatcher (gallery-dispatcher)
The Dispatcher satisfies a very common need of developers using the YUI library: dynamic execution of Ajax response content. (new)

Node Accordion (gallery-node-accordion)
The Accordion Node Plugin makes it easy to transform existing markup into an accordion element with expandable and collapsible elements. Elements are easy to customize, and only require a small set of dependencies. (new)

Event Binder (gallery-event-binder)
Binding user actions until a particular YUI instance become ready, and the listeners defined before flushing those events through a queue. This will help to catch some early user interactions due the on-demand nature of YUI 3. (new)

Preload (gallery-preload)
Port of Stoyan Stefanov's JavaScript preload() function. It also has built-in support for Timer Idle to preload files only when the user is idle to avoid any overhead during the initial loading process. (new)

Parent Window Utility (gallery-parent-window)
This utility provides a set of functionalities to interact with the parent window. (new)

- See more modules by Caridy.

Bubbling Library is free open source software under the BSD License

(c) 2006 - 2010 Caridy Patino. All Rights Reserved.

This is one of my side projects, if you need something, just ask!