Click here to Skip to main content
11,412,833 members (73,000 online)
Click here to Skip to main content

A simple progress bar web user control

, 8 Sep 2003 CPOL
Rate this:
Please Sign up or sign in to vote.
Lightweight HTML table based (no image) progress bar

Sample Image - ProgressBar.gif


In a recent project, I needed a way to show progress to a user in a series of manually progressed web pages. If they were on page 10 of 20 pages, I wanted them to be able to clearly see that they were half way done.

My ideal solution would be a quick, simple, lightweight progress bar. I toyed with complex ideas like dynamically creating images to represent the current state, but in the end another programmer showed me a much simpler way, by using an HTML table. I took that idea, and extended it by creating a web user control that I could use (and re-use) in my ASP.NET application.

Using the code

I created a user control with a single label control called lblProgress. I then added a public SetProgress method to allow the parent web form to set the progress.

Public Sub SetProgress(ByVal current As Integer, ByVal max As Integer)
    Dim percent As String = Double.Parse(current * 100 / max).ToString("0")

    If Not percent.Equals("0") And Not percent.Equals("100") Then
        lblProgress.Text = percent + "% complete (" + _
                current.ToString() + " of " + max.ToString() + ")"

    lblProgress.Text = lblProgress.Text & _
        "<TABLE cellspacing=0 cellpadding=0 border=1 width=200 ID="Table1"_
        ><TR><TD bgcolor=#000066 width=" + _
        percent.ToString() + _
        "%> </TD><TD bgcolor=#FFF7CE> _
    End If
End Sub

Later on, I added a check to prevent the progress bar from displaying unless it reached a threshold (25% in my case). The idea was that we did not want to discourage the user by showing them that they were only 5% done. Rather, we would start showing the progress bar once they had reached some predetermined point, at which time it would become more of an encouragement.

If Integer.Parse(percent) < 25 Then
    'only start showing at 25%
    lblProgress.Visible = False
    lblProgress.Visible = True
End If

Points of interest

Obviously this is a very simple technique, but it saved me from myself - I could have spent many hours writing a user control that dynamically generated an image, and obtained something only marginally better looking than this.


  • First upload: 9/9/2003.


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


About the Author

Steven Campbell
Web Developer
United States United States
Steve is a software developer working in Minneapolis, MN.

Comments and Discussions

QuestionSimple Progress Bar Pin
Member 10544792 at 17-Mar-14 4:44
memberMember 1054479217-Mar-14 4:44 
GeneralMy vote of 4 Pin
LeahAtWork at 24-Apr-12 18:54
memberLeahAtWork24-Apr-12 18:54 
GeneralThanks lot!!!!!!!! Pin
kalim shekh at 13-Jan-11 21:26
memberkalim shekh13-Jan-11 21:26 
Generalthanks.../ Pin
dakshithaw at 15-Dec-08 0:11
memberdakshithaw15-Dec-08 0:11 
QuestionClient-Sever interaction .net Pin
0700347H at 30-Nov-08 5:40
member0700347H30-Nov-08 5:40 
GeneralTrying to convert to C# [modified] Pin
Ekjon at 5-Nov-08 13:12
memberEkjon5-Nov-08 13:12 
QuestionWebprogressbar and firefox Pin
brambillaa at 10-Oct-07 0:34
memberbrambillaa10-Oct-07 0:34 
Generalneed help Pin
faycal_22 at 26-Aug-07 2:31
memberfaycal_2226-Aug-07 2:31 
Generalthx Pin
astena at 10-Apr-07 23:42
memberastena10-Apr-07 23:42 
GeneralRe: thx Pin
Certain Shadow at 22-Jul-07 15:25
memberCertain Shadow22-Jul-07 15:25 
GeneralRetrieving the user control progress Pin
w_mainwaring at 5-Feb-07 4:41
memberw_mainwaring5-Feb-07 4:41 
Thanks for posting this really useful example.
I have converted 'SetProgress' into a property, but am wondering how I can GET the progress control's value directly from the table? (ie. without storing the value in a member variable when it's set).

I have replaced:


This VB doesn't seem to work on the server when the form is posted back with a submit button:
Dim table as Table = FindControl("myTable")

as table is always Nothing

Can anyone tell me why please?
I am looking for help generally on how to retrieve data from a user control, which has been created by setting the 'Text' field to TABLE, just like in this example.
Any help would be gratefully appreciated.

GeneralRe: Retrieving the user control progress Pin
ArkonXX at 8-Mar-07 4:11
memberArkonXX8-Mar-07 4:11 
QuestionQuestion Pin
sheraziii at 12-Sep-05 1:54
membersheraziii12-Sep-05 1:54 
Generallbl doesnt refresh Pin
Kov at 27-Nov-04 14:05
sussKov27-Nov-04 14:05 
GeneralRe: lbl doesnt refresh Pin
Steven Campbell at 28-Nov-04 8:11
memberSteven Campbell28-Nov-04 8:11 
Generalerror Pin
webber123456 at 26-Nov-04 0:43
memberwebber12345626-Nov-04 0:43 
GeneralRe: error Pin
Steven Campbell at 26-Nov-04 7:10
memberSteven Campbell26-Nov-04 7:10 
GeneralRe: error remains Pin
webber123456 at 26-Nov-04 9:29
memberwebber12345626-Nov-04 9:29 
Generalerror Pin
webber123456 at 26-Nov-04 0:39
memberwebber12345626-Nov-04 0:39 
GeneralRe: error Pin
Steven Campbell at 26-Nov-04 7:09
memberSteven Campbell26-Nov-04 7:09 
QuestionCompile? Pin
DOTofLTC at 3-Nov-04 8:39
memberDOTofLTC3-Nov-04 8:39 
AnswerRe: Compile? Pin
Steven Campbell at 3-Nov-04 9:27
memberSteven Campbell3-Nov-04 9:27 
GeneralWill this work with C# Pin
Dushman at 13-Oct-03 12:34
memberDushman13-Oct-03 12:34 
GeneralRe: Will this work with C# Pin
Mike Ellison at 13-Oct-03 15:27
memberMike Ellison13-Oct-03 15:27 
GeneralRe: Will this work with C# Pin
Steven Campbell at 13-Oct-03 18:29
memberSteven Campbell13-Oct-03 18:29 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150427.1 | Last Updated 9 Sep 2003
Article Copyright 2003 by Steven Campbell
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid