Ajax/Prototype/Prototype-UI: Creating a modal busy screen

While I was developing a web based application, one of the operations took rather long to accomplish. So I was looking for ways to create a modal busy screen with spinning image at the center. Most of them involves quite a bit of code. Then I decided to see whether I can make use of Prototype-UI to create a modal busy page and it works!! Amazingly, it doesn’t involve a lot of CSS and Javascript code either. Here are the steps:

1. Get your favourite animated spinning image

For me, I used Ajaxload – Ajax loading gif generator to create my animated busy image. It is a great site with huge selection of spinning images in different shapes and your choice of colors.

2. Build a new CSS theme style for Prototype-UI Window

We need to create a custom made CSS theme for this new style of window which it doesn’t have any frames and buttons (maximise, minimise and close). The CSS code is very straightforward, just copy few bits from another theme. The only bits we need are the ‘overlay’ and ‘content’. Here is the CSS definition of busy.css.

.busy .content {
    background:transparent;
    color:white;
    font:normal 11px/1em Verdana, Arial, sans-serif;
    overflow:auto;
}

.busy_overlay {
    background-color: #FFF;
    filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
}

3. Create an UI Window with the spinning image

Finally, all we need to do is to create a modal UI.Window with the spinning image as the content. Here is the short code to switch on/off the busy page:

var busy_page = null;
function set_busy_screen() {
  busy_page = new UI.Window({
    resizable: false,
    theme: 'busy',
    draggabe: false,
    width: 32,
    height: 32
  })
  .setContent("<div style='margin-left:40%' ><img src='../images/ajax-loader.gif' border=0></div>")
  .show(true)
  .center();
}

function unset_busy_screen() {
  if (busy_page) {
    busy_page.close();
    busy_page = null;
  }
}

That’s all!!! Remember to include the busy.css in the page.

<script language="JavaScript" type="text/javascript" src="./js/prototype.js"></script>
<script language="javascript" type="text/javascript" src="./js/prototype-ui/prototype-ui.packed.js"></script>
<script language="javascript" type="text/javascript" src="./js/prototype-ui/window.packed.js"></script>
<link type="text/css" rel="stylesheet" href="./css/themes/window/busy.css"/>

Screenshot
Here is what it looks like on Safari. It also works on Firefox and IE 8.

I work for iTrinegy. Here are my other Prototype-UI and Prototype blogs