Wednesday, July 18, 2007

Gmail Style Ajax Status Message

Here is some css with a test bed to mimic Gmail's loading indicator. Hopefully it will be useful to somebody.
<style type="text/css">
div#statusContainer {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 10px;

div#statusMessageContainer {
 position: absolute;
 background-color: #000000;
 color: white;
 width: 80px;
 font-family: Arial, Helvetica, sans-serif;
 padding: 2px;
 left: 0px;
 font-weight: 700;
<script type="text/javascript">
function ToggleStatus() {
 var toggleButton = document.getElementById('toggleButton');

 if (document.getElementById('statusContainer').style.visibility == 'visible') {
  toggleButton.value = 'Show';
  document.getElementById('statusContainer').style.visibility = 'hidden';
 else {
  toggleButton.value = 'Hide';
  document.getElementById('statusContainer').style.visibility = 'visible';
<div id="statusContainer" style="visibility: hidden;">
 <div id="statusMessageContainer">Loading...</div>
<br />
<input type="button" id="toggleButton" name="toggleButton" onclick="ToggleStatus();" value="Show" />


  1. Did this work for you in IE 6? I had some trouble finding a good approach to work in all browsers...

  2. Yes, it works fine in IE 6. However, to clarify, it's in the upper left corner not the right corner like in Gmail. I realize now that the title might be misleading. I tried the upper right corner but between different resolutions, it was a pain (maybe that's what you were talking about).


// //]]>