Error:

I wanted the image Progress Bar to load while retrieving the data from the grid. While I found a lot of solutions consisting of percentages and bars, what I really required was an image progress bar and a simple code to show it while it was retrieving and hide it when the data was loaded, all on a button click.

Solution:

It took me 3-4 days to find out the simplest code for this. Maybe, I’m just naive.

<script language =javascript >function showImage()
{
document.getElementById("progbar").style.visibility = "visible";
}
</script>

This is the javascript function calling the id of the div which contains the image progress bar.

<style type="text/css">
.progbar
{
visibility: hidden;
}
</style>


The CSS of the div which when initialised will appear as hidden.

<asp:button id="btnSubmit" runat="server" Width="104px" ForeColor="Desktop" BorderStyle="Solid"
Font-Names="Calibri" Text="View" Font-Bold="True" OnClientClick="showImage()">

Calling the javascript function on button click.

<div id="progbar" class="progbar" class="progbar" runat=server><img src=indicator_mozilla_blu.gif name="prog"/></div>

This is the div which contains the image file.

I got this simple code, thank to CodeToad.Com.

Now, the only error which is occurring – the image gif does not animate because IE does not refresh.

I tried the solutions suggested on BrendenTompkins blog, but none of them seem to work.

This finally worked:

setTimeout("document.getElementById('prog').src='indicator_mozilla_blu.gif';",700);
setTimeout("z=document.getElementById('progbar');",1000);

For some cool progress/loader images, check out http://ajaxload.info/#preview