Click here to Skip to main content
14,302,993 members

Create Simple ASP.NET Progress Bar Control

Rate this:
4.17 (30 votes)
Please Sign up or sign in to vote.
4.17 (30 votes)
30 May 2005
Create simple ASP.NET Progress Bar Web control, and download example ZIP file.

Sample Image - prgBar2.jpg

Using the code

Our progress bar is a simple HTML table with single row and two columns:

<table width="200" border="0">
        <td width="50%" bgcolor="#999999">Indicator</td>
        <td width="50%" ></td>

Should be like:


We assign column widths with percent values, if your score or progressed value is 300 and Max. Score/Progressed Value is 1000,then your percentage is { (300/1000)*100 = 30 }. So, the First column width is (width="30%"), and second column width is { 100-30=70 } (width="70%")


        <td width="30%" bgcolor="#999999">Indicator</td>
        <td width="70% "></td>

Should be:


Create your own Web Control

If you are not familiar with custom Web controls, here is a partial definition from the Microsoft documentation:

Web controls run on the server and include form controls such as buttons and text boxes, as well as special purpose controls such as a calendar. This allows you to programmatically control these elements on a Web page. Web controls are more abstract than HTML controls. Their object model does not necessarily reflect HTML syntax. (See

We need two variables only to implement this control progressed value and max value, and let Render method write above the HTML table with our two values to web page..

public class WebCustomControl1 : System.Web.UI.WebControls.WebControl
    private float progressedValue;
    private float maxValue;
    //to access the control within your web solution code
    public float Value
        get{return progressedValue;}
    public float MaxValue
        get{return maxValue;}
    protected override void Render(HtmlTextWriter output)
        //table start tag
        output.Write("<table width="200" border="0">");
        //row start tag
        //Progress Indicator Column start tag
        //calculate width in percent
        output.Write(" width=\""+progressedValue*100/maxValue);
        //the rest of column start&end tags
        output.Write("\" bgcolor=\"#999999\">"+
               progressedValue*100/maxValue+"% </td>");
        //second Column start tag
        //calculate width in percent
        output.Write("" width=\""+(100-(progressedValue*100/maxValue))");
        //the rest of column start&end tags
        output.Write("\" ></td>");
        //row end tag
        //table end tag

Step Further

Our 3D ASP.NET Control

In the above table, I use background image attribute in this control , then I've great result, 3D Bar!!

The Code modification

There are five member properties and two methods, one method writes the above code with help of StringBuilder then returns it as string to Render method, there is nothing new..!

Render method becomes:

protected override void Render(HtmlTextWriter output)

where the Progress(....) method do what we do in the above example, but with additional tags (just images & styles....):

private string Progress(float _value,float _total)
  float result=(_value*100/_total);//calculations 
  float spent=100-result;          //result holders
  StringBuilder s=new StringBuilder("");

    case "0"://score=0
      s.Append("<table border=\"0\" width=\"622\">");
      s.Append("<tr><td width=\"100%\">");
      s.Append("<img border=\"0\" src=\"images/zero.jpg\" " + 
             " width=\"622\" height=\"29\">");
      s.Append("<p align=\"center\" dir=\"ltr\">");
      s.Append("<p align=\"center\"><font color=\"#FF0000\" " + 
             " size=\"6\" face=\"Impact\">");
      s.Append(minText); // min value text
      s.Append("</font><font size=\"6\" face=\"Impact\" " + 
      s.Append("</font><font color=\"#FF9933\" " + 
             "face=\"Impact\" size=\"5\"> X 10");
      s.Append("<sup>6</sup></font>" + 
             "<font color=\"#FF0000\" size=\"6\" face=\"Impact\">");
      s.Append("    ...!</font></td></tr></table>");
      s.Append("<font color=\"#8585AD\" face=\"Impact\" " + 
             "size=\"2\"> Completed ");
      s.Append(_value+" / "+_total);// acutally data
    case "100"://score=100
      s.Append("<table border=\"0\" width=\"622\">");
      s.Append("<tr><td width=\"100%\">");
      s.Append("<img border=\"0\" src=\"images/full.jpg\" " + 
             "width=\"622\" height=\"33\">");
      s.Append("<p align=\"center\" dir=\"ltr\">");
      s.Append("<p align=\"center\"><font " + 
             "size=\"6\"face=\"Impact\" color=\"#FF6600\">");
      s.Append(fullText); //max value text
      s.Append("<font size=\"5\" face=\"Impact\" " + 
            "color=\"#FF0000\">. . . !</font>");
      s.Append("<font size=\"5\" color=\"#FF0000\">" + 
      s.Append("<font color=\"#8585AD\" face=\"Impact\" " + 
            "size=\"2\"> Completed ");
      s.Append(_value+" / "+_total);// acutally data
      // Progress Bar
      s.Append("<table border=\"0\"width=\"622\" " + 
      s.Append("<tr><td width=\"100%\"> " + 
           "<div align=\"left\">");
      s.Append(" <table border=\"0\" width=\"100%\"> <tr>");
      s.Append("<td width=\"");
      s.Append(spent); // empty cell percentage value

      s.Append("<td width=\"");
      s.Append(result);          // progress bar percentage value

      s.Append("<table border=\"0\" width=\"100%\">");
      s.Append("<tr><td width=\"1%\">");
      s.Append("<img border=\"0\" src=\"images/endprogressBG.JPG\" " + 
      s.Append("<td width=\"97%\" background=\"images/progressBG.JPG\"> " +
            "</td><td width=\"");
      s.Append("<img border=\"0\" src=\"images/lprogressBG.JPG\" " + 
      s.Append("</tr></table></div></td> " + 
      s.Append("<table border=\"0\" width=\"500\">" + 
            "<tr><td width=\"100%\">");
      s.Append("<p dir=\"ltr\" align=\"center\">< " + 
            "font face=\"Impact\"><font size=\"4\">");
      s.Append(" </font><font color=\"#FF6600\" size=\"6\">");
      s.Append(result.ToString());// percentage
      s.Append("</font><font size=\"4\" color=\"#FF6600\">");
      s.Append(" % </font><font color=\"#8585AD\" " + 
           "> Completed ");
      s.Append(_value+" / "+_total);// acutally data


  return s.ToString(); // Done...!

The images used by this control are within ZIP file, you should copy this folder to your web solution.

========== Build: 1 succeeded, 0 failed, 0 skipped ==========


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Ameen AboDabash
Team Leader
United Arab Emirates United Arab Emirates
No Biography provided

Comments and Discussions

Questionit is not showing intermediate result. It renders the last one. Pin
santosh jha"Don"10-Apr-15 20:54
membersantosh jha"Don"10-Apr-15 20:54 
BugProgress bar not showing Pin
Serenity117-Mar-14 21:04
memberSerenity117-Mar-14 21:04 
Questioncalling Render?? Pin
J TG26-Jan-14 23:27
memberJ TG26-Jan-14 23:27 
GeneralMy vote of 5 Pin
antonache_radu@yahoo.com26-Apr-12 22:35
memberantonache_radu@yahoo.com26-Apr-12 22:35 
QuestionHow to Use this control? Pin
shokung1-Mar-12 21:45
membershokung1-Mar-12 21:45 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey17-Feb-12 21:46
professionalManoj Kumar Choubey17-Feb-12 21:46 
GeneralI tried to add ProgressBar in my Application but in toobox i can't find the Progress Bar Pin
bhatted23-Apr-09 5:46
memberbhatted23-Apr-09 5:46 
Generalhelp please Pin
judyIsk15-Jan-07 0:28
memberjudyIsk15-Jan-07 0:28 
GeneralNice one Pin
Daniel Vaughan29-Oct-06 5:42
memberDaniel Vaughan29-Oct-06 5:42 
NewsWebControl Usage Pin
Askaroth26-Feb-06 10:13
memberAskaroth26-Feb-06 10:13 
AnswerRe: WebControl Usage Pin
Ameen AboDabash28-Feb-06 3:38
memberAmeen AboDabash28-Feb-06 3:38 
GeneralRe: WebControl Usage Pin
Member 79267041-Dec-11 17:55
memberMember 79267041-Dec-11 17:55 
GeneralDivision by zero Pin
aurorahe9-Sep-05 9:20
memberaurorahe9-Sep-05 9:20 
GeneralRe: Division by zero Pin
Ameen AboDabash10-Sep-05 22:26
memberAmeen AboDabash10-Sep-05 22:26 
GeneralCannot open in Visual Studio.NET 2003 Pin
Dan T.9-Aug-05 11:58
sussDan T.9-Aug-05 11:58 
GeneralRe: Cannot open in Visual Studio.NET 2003 Pin
Ameen AboDabash9-Aug-05 21:09
memberAmeen AboDabash9-Aug-05 21:09 
GeneralThanks !!! Pin
Trance Junkie30-May-05 0:56
memberTrance Junkie30-May-05 0:56 
GeneralRe: Thanks !!! Pin
Ameen AboDabash2-Jun-05 12:14
memberAmeen AboDabash2-Jun-05 12:14 

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.

Posted 22 May 2005


94 bookmarked