Click here to Skip to main content
13,552,501 members
Click here to Skip to main content
Add your own
alternative version


92 bookmarked
Posted 8 Sep 2003
Licenced CPOL

A simple progress bar web user control

, 8 Sep 2003
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.

You may also be interested in...


Comments and Discussions

QuestionClient-Sever interaction .net Pin
0700347H30-Nov-08 4:40
member0700347H30-Nov-08 4:40 
I been trying to do a client-sever service game portal using VS 2005 web application using ASP.NET and C# .

1.How do I do a chat dialog with client-sever interaction like how msn Messenger work?
2.How can I do a simple 2D game like utopia.

Hope that you can explain step by step as I'm a beginner which start programming since mid of 2008.
Thank you for looking into this. Hope to see your reply ASAP.

warmest regards,

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.

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