Click here to Skip to main content
15,350,151 members
Articles / Web Development / IIS
Posted 8 Nov 2006


21 bookmarked

A cool progress bar using JavaScript

Rate me:
Please Sign up or sign in to vote.
2.46/5 (9 votes)
8 Nov 2006CPOL1 min read
This article shows how to generate a progress bar using JavaScript.


I ran into the problem of creating a progress bar in a web application because the application took some time to do background processes. This could be anything from database operations to file uploads. So I came up with a progress bar concept. Microsoft provides a control for Windows based applications but for web based applications, there is no readily available control shipped with VS. A solution can be achieved through JavaScript.


I built this sample application using ASP.NET 1.1 and JavaScript.

Code Walkthrough

The sample application contains two ASPX files:

  1. Main.aspx: This file is the place holder of the progress bar.
  2. Progressbar.aspx: This file will populate the progress bar.

We will first examine the Main.aspx file. This file contains the single line code apart from the default code generated by the framework.

<iframe height =100 frameborder =0 width =900 
        id=frm runat =server src ="progressbar.aspx"></iframe>

height and width are set as per the developer's choice. By default, iframe will display a border; if you wish, you can avoid this my setting the frameborder attribute to 0.

Now, we will examine the Progressbar.aspx file.

function progress()
  var tend = "</tr></table>";
  var tstrt = "<table><tr>";
  scell = scell + "<td style='width:10;height:10' bgcolor=red>";
  document.getElementById("cell1").innerHTML = sbase + tstrt +  scell + tend; 
  if( i < 50)
  // total 50 cell will be created with red color.
      i = i + 1;
      timerID = setTimeout("progress()",1000);
      // recursive call

The above JavaScript code will generate the progress bar with a red color.

Closing Comments

It is not necessary that you should use an iframe for your progress bar. You can use the same JavaScript and HTML code in your parent page as well.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Rashutosh Paul
Web Developer
India India
Working with Logica Pvt. Ltd as a Tech Lead.

Comments and Discussions

Questiondude.. this was a life saver Pin
ppearson30009-Aug-07 10:38
Memberppearson30009-Aug-07 10:38 
GeneralRe: dude.. this was a life saver Pin
LACoder29-Mar-09 2:25
MemberLACoder29-Mar-09 2:25 
QuestionCan i implement this progress bar when file uploading Pin
sri baski15-Mar-07 1:26
Membersri baski15-Mar-07 1:26 
AnswerRe: Can i implement this progress bar when file uploading Pin
dongxiang20-Jun-07 23:11
Memberdongxiang20-Jun-07 23:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.