<p>i got a client side javascript function which is triggered on a button click (basically, its a calculator!!). Sometimes, due to enormous data on the page, the javascript calculator function take to long &amp; makes the page appear inactive to the user. I was planning to display a transparent div over entire page, maybe with a busy indicator (in the center) till the calculator function ends, so that user waits till process ends. </p>

<pre>
function CalculateAmountOnClick() {
  // Display transparent div

  // MY time consuming loop!
    {

    }

  // Remove transparent div 

}
</pre>

<p>Any ideas on how to go about this? Should i assign a css class to a div (which surrounds my entire page's content) using javascript when my calculator function starts? I tried that but didnt get desired results. Was facing issues with transparency in IE 6. Also how will i show a loading message + image in such a transparent div?</p>

<p>TIA</p>

I would do something like:
unhide a div (
```
display:inline
```
)
make the
```
position:absolute
```
give it a
```
z-index:99
```
make the height and width
```
100%
```
when the processing is done set
```
display:none
```
To make it transparent you'll have to set the opacity which is different in Firefox, IE, etc.
To show a loading icon you can always create a second div and position it where you want to on the page.  When it's done loading, remove it along with the transparent one.