Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Creating an XP style progress bar in web page.

Author: DevASP
Download Source Code : 657_WinXPProgressbar.zip

This article is about how you can create an XP style progress bar in your web page. This progress bar is easily customizable.

This is a great looking pure DHTML progress bar that resembles the one seen in Window XP's startup screen. All visual aspects of the bar can be customized, and the script can be invoked multiple times to display multiple bars on the same page.Note that this application by default doesn't perform any action other than animating the progress bar. It's up to you to create helper functions to accomplish any relevant tasks.

 

Steps you will do.

 

Start visual studio and create a new web application.Add a new JavaScript file in your project from the project menu and add the following JavaScript code.

 

 

 var w3c=(document.getElementById)?true:false;

var ie=(document.all)?true:false;

var N=-1;

 

function createBar(w,h,bgc,brdW,brdC,blkC,speed,blocks,count,action){

if(ie||w3c){

var t='<div id="_xpbar'+(++N)+'" style="visibility:visible; position:relative; overflow:hidden; width:'+w+'px; height:'+h+'px; background-color:'+bgc+'; border-color:'+brdC+'; border-width:'+brdW+'px; border-style:solid; font-size:1px;">';

t+='<span id="blocks'+N+'" style="left:-'+(h*2+1)+'px; position:absolute; font-size:1px">';

for(i=0;i<blocks;i++){

t+='<span style="background-color:'+blkC+'; left:-'+((h*i)+i)+'px; font-size:1px; position:absolute; width:'+h+'px; height:'+h+'px; '

t+=(ie)?'filter:alpha(opacity='+(100-i*(100/blocks))+')':'-Moz-opacity:'+((100-i*(100/blocks))/100);

t+='"></span>';

}

t+='</span></div>';

document.write(t);

var bA=(ie)?document.all['blocks'+N]:document.getElementById('blocks'+N);

bA.bar=(ie)?document.all['_xpbar'+N]:document.getElementById('_xpbar'+N);

bA.blocks=blocks;

bA.N=N;

bA.w=w;

bA.h=h;

bA.speed=speed;

bA.ctr=0;

bA.count=count;

bA.action=action;

bA.togglePause=togglePause;

bA.showBar=function(){

this.bar.style.visibility="visible";

}

bA.hideBar=function(){

this.bar.style.visibility="hidden";

}

bA.tid=setInterval('startBar('+N+')',speed);

return bA;

}}

 

function startBar(bn){

var t=(ie)?document.all['blocks'+bn]:document.getElementById('blocks'+bn);

if(parseInt(t.style.left)+t.h+1-(t.blocks*t.h+t.blocks)>t.w){

t.style.left=-(t.h*2+1)+'px';

t.ctr++;

if(t.ctr>=t.count){

eval(t.action);

t.ctr=0;

}}else t.style.left=(parseInt(t.style.left)+t.h+1)+'px';

}

 

function togglePause(){

if(this.tid==0){

this.tid=setInterval('startBar('+this.N+')',this.speed);

}else{

clearInterval(this.tid);

this.tid=0;

}}

 

function togglePause(){

if(this.tid==0){

this.tid=setInterval('startBar('+this.N+')',this.speed);

}else{

clearInterval(this.tid);

this.tid=0;

}} 

  

 

Explanation of function and customization:

To customize the look of the progress bar, simply pass in different values into createBar():

 

 

var xyz = createBar(width, height, backgroundColor, borderWidth, borderColor, blockColor, scrollSpeed, blockCount, actionCount, actionString)

  

 

They are:

 

xyz - An arbitrary variable name to store the bar reference and must be unique. This variable will have a few different methods (explained later) which can be used to control some of each bar's behavior. This variable IS REQUIRED if you wish to use these methods. However, if you do not plan to use the methods, then the variable assignment is not necessary, but it won't hurt to use it anyway.  

width- Total width of the entire bar in pixels.  

height- Total height of the entire bar in pixels. 

backgroundColor- Background color of the bar. Use valid CSS color or HEX color code value.  

borderWidth- The width of the border around the bar, in pixels.  

borderColor- The color of the border around the bar. Use valid CSS color or HEX color code value.  

blockColor- The darkest color of the individual blocks. The color will progressively become more transparent. Use valid CSS color or HEX color code value.  

scrollSpeed- The delay, in milliseconds, between each scroll step. Use smaller values for faster scroll speeds.  

blockCount- The total number of blocks to use.  

actionCount - The number of times the bar is to scroll before actionString is performed.  

actionString - The javascript function, in string form, to execute once the bar has scrolled actionCount times. Set this to an empty string to do nothing. If doing nothing, you can use any number as actionCount 

Now open the HTML code of your web page and add the following JavaScript tag before closing the head tag to include the JavaScript file which you have created above.

 

 

<script language="javascript" src="xp_progress.js">

</script> 

Add the following HTML code in the form tag to design the layout of your web page and show the progress bars.  

 

<center> 

 

 

Progress bars with XP style having different colors. easily customizeable

 

 

<br><br><br>

<script type="text/javascript">

function redirectpage(){

bar3.togglePause()

window.location="http://www.devasp.com"

}

var bar1= createBar(300,20,'white',1,'black','blue',85,7,5,"redirectpage()");

</script>   

<br><br><br>

<script type="text/javascript">

function redirectpage(){

bar3.togglePause()

window.location="http://www.devasp.com"

}

var bar3= createBar(300,20,'white',1,'black','red',85,7,5,"redirectpage()");

</script>

<br><br><br>

Dont forget to visit devasp<br>

<a href="http://www.devasp.com">www.devasp.com</a>

</center> 

 

 

Run your application as see the progress bar.

Article Comments
This is very amazing and good work. Thanks a lot but there is one thing I need to do ,I want to bind this progress bar to an event. e.g. I want the progress bar to run when I click a 'Start' button. Thanks very much

Posted on 2/5/2007 10:31:51 AM by jessica darin

save it in a new .htm file then dynamicly add a iframe witch will show the comtents of the page which has you bar in.

Posted on 3/22/2007 5:12:41 PM by Tom

how show that how many bit of page is left to load on front page.with java script

Posted on 10/20/2007 6:00:02 PM by rock

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Getting system information using .NET.

Disclaimer - Privacy
© 2002-2017 DevASP.net