Click here to Skip to main content
15,346,269 members
Articles / Web Development / ASP.NET
Posted 8 Sep 2003


92 bookmarked

A simple progress bar web user control

Rate me:
Please Sign up or sign in to vote.
4.60/5 (34 votes)
8 Sep 2003CPOL1 min read
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 1054479217-Mar-14 3:44
MemberMember 1054479217-Mar-14 3:44 
GeneralMy vote of 4 Pin
LeahAtWork24-Apr-12 17:54
professionalLeahAtWork24-Apr-12 17:54 
GeneralThanks lot!!!!!!!! Pin
kalim shekh13-Jan-11 20:26
Memberkalim shekh13-Jan-11 20:26 
Generalthanks.../ Pin
dakshithaw14-Dec-08 23:11
Memberdakshithaw14-Dec-08 23:11 
QuestionClient-Sever interaction .net Pin
0700347H30-Nov-08 4:40
Member0700347H30-Nov-08 4:40 
GeneralTrying to convert to C# [modified] Pin
Ekjon5-Nov-08 12:12
MemberEkjon5-Nov-08 12:12 
QuestionWebprogressbar and firefox Pin
brambillaa9-Oct-07 23:34
Memberbrambillaa9-Oct-07 23:34 
Generalneed help Pin
faycal_2226-Aug-07 1:31
Memberfaycal_2226-Aug-07 1:31 
Generalthx Pin
astena10-Apr-07 22:42
Memberastena10-Apr-07 22:42 
GeneralRe: thx Pin
Certain Shadow22-Jul-07 14:25
MemberCertain Shadow22-Jul-07 14:25 
GeneralRetrieving the user control progress Pin
w_mainwaring5-Feb-07 3:41
Memberw_mainwaring5-Feb-07 3:41 
GeneralRe: Retrieving the user control progress Pin
Jeffrey Deflers8-Mar-07 3:11
MemberJeffrey Deflers8-Mar-07 3:11 
QuestionQuestion Pin
sheraziii12-Sep-05 0:54
Membersheraziii12-Sep-05 0:54 
Generallbl doesnt refresh Pin
zoinkydoink27-Nov-04 13:05
Memberzoinkydoink27-Nov-04 13:05 
GeneralRe: lbl doesnt refresh Pin
Steven Campbell28-Nov-04 7:11
MemberSteven Campbell28-Nov-04 7:11 
This progress bar is for showing progress in a multi-step process, like a questionnaire with lots of questions. It sounds like you are trying to use it to show progress when the user is waiting for something. It will not work that way.

my blog
Generalerror Pin
webber12345625-Nov-04 23:43
Memberwebber12345625-Nov-04 23:43 
GeneralRe: error Pin
Steven Campbell26-Nov-04 6:10
MemberSteven Campbell26-Nov-04 6:10 
GeneralRe: error remains Pin
webber12345626-Nov-04 8:29
Memberwebber12345626-Nov-04 8:29 
Generalerror Pin
webber12345625-Nov-04 23:39
Memberwebber12345625-Nov-04 23:39 
GeneralRe: error Pin
Steven Campbell26-Nov-04 6:09
MemberSteven Campbell26-Nov-04 6:09 
QuestionCompile? Pin
DOTofLTC3-Nov-04 7:39
MemberDOTofLTC3-Nov-04 7:39 
AnswerRe: Compile? Pin
Steven Campbell3-Nov-04 8:27
MemberSteven Campbell3-Nov-04 8:27 
GeneralWill this work with C# Pin
13-Oct-03 11:34
suss13-Oct-03 11:34 
GeneralRe: Will this work with C# Pin
Mike Ellison13-Oct-03 14:27
MemberMike Ellison13-Oct-03 14:27 
GeneralRe: Will this work with C# Pin
Steven Campbell13-Oct-03 17:29
MemberSteven Campbell13-Oct-03 17:29 

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.