Progress Bar

ReportingAnalyst · Dec 8, 2006

I got this Progress Bar code when I did a google on this.

Code:

<% Response.Buffer = True %>
<html>
<style type="text/css">
<!--
#container {
width: 400px;
border: 1px solid #000099;
}
#progressBar {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
background-color: #0000FF;
width: 100%;
margin: 0px;
padding: 0px;
height: 30px;
font-size: 12px;
}
-->
</style>
<title>Progress Bar</title><body>

<div id="MyProgressBar">

Please wait while the page is loading...<br>
<span id="progressText">Progress: 0%</span><br>
<div id="container"><div id="progressBar"></div></div>
</div>
<%

Const DUMMY_NUMBER=100000
curPercent = 0
strDummy = ""
recPerPercent = CLng(DUMMY_NUMBER/100)
startTime = Now()
For x=1 To DUMMY_NUMBER
If (x Mod recPerPercent)=0 Then
Response.Write("<script type=""text/javascript"">")
Response.Write("document.getElementById(""progressText"").innerHTML = ""Progress: " &_
(curPercent+1) & "%"";")
Response.Write("document.getElementById(""progressBar"").style.width = """ &_
(curPercent+1) & "%"";")
curPercent = curPercent+1
Response.Write("</script>")
Response.Flush
End If
strDummy = strDummy&"x"
Next
Response.Write("<script type=""text/javascript"">")
Response.Write("document.getElementById(""MyProgressBar"").style.display = ""none"";")
Response.Write("</script>")
%>
</body>
</html>

My question is how can I incorporate this progress bar with the time taken by the query to return the result set.

Thanks.

Sheco · Dec 8, 2006

If your server-side logic required doing many queries then you could modify the prgress bar to help but its not much good for a single query.

I guess you could perhaps break a single query into several. For example suppose it is a query that returns all employees in alphabetical order... you could maybe split it into 4 queries that return A-F, G-N, O-S, T-Z and then use Response.Flush to send back 0%, 25%, 50%, 75%, and 100%

However it is quite possible that this would increase the total amount of the user would have to wait.

DotNetGnat · Dec 8, 2006

try this...just a way to trick the users...

Code:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
if(document.getElementById) {
	var upLevel = true;
	}
else if(document.layers) {
	var ns4 = true;
	}
else if(document.all) {
	var ie4 = true;
	}

function showObject(obj) {
	if (ns4) obj.visibility = "show";
	else if (ie4 || upLevel) obj.style.visibility = "visible";
	}
function hideObject(obj) {
	if (ns4) {
		obj.visibility = "hide";
		}
	if (ie4 || upLevel) {
		obj.style.visibility = "hidden";
		}
	}

</SCRIPT>
</head>
<body>
<DIV ID="splashScreen" STYLE="position:absolute;z-index:5;top:30%;left:28%;">
<TABLE BGCOLOR="#000000" BORDER=1 BORDERCOLOR="#000000" CELLPADDING=0 CELLSPACING=0 HEIGHT=200 WIDTH=300>
<TR>
<TD WIDTH="100%" HEIGHT="100%" BGCOLOR="#CCCCCC" ALIGN="CENTER" VALIGN="MIDDLE">
<BR><BR> &nbsp; &nbsp; 
<FONT FACE="Helvetica,Verdana,Arial" SIZE=3 COLOR="#000066"><B>Please wait...</B></FONT> 
&nbsp; &nbsp; <BR> 
<IMG SRC="[red]wait.gif[/red]" BORDER=1 WIDTH=75 HEIGHT=15><BR><BR> 
</TD>
</TR>
</TABLE>
</DIV>
<%Response.Flush
'all the asp code here
Response.Flush%>
<SCRIPT LANGUAGE="JavaScript">
if(upLevel) {
	var splash = document.getElementById("splashScreen");
	}
else if(ns4) {
	var splash = document.splashScreen;
	}
else if(ie4) {
	var splash = document.all.splashScreen;
	}
hideObject(splash);
</SCRIPT>
</body>
</html>

get the wait.gif from the following website...

http://www.gimptalk.com/forum/topic.php?t=5086&start=1&tutorial-Animated-Progress-Bar.html#32922

you will see an animated progress bar image...save it as wait.gif...

-DNG

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Progress Bar

ReportingAnalyst

MIS

Sheco

Programmer

DotNetGnat

Programmer

Similar threads

Part and Inventory Search

Sponsor