Click here to Skip to main content
15,867,704 members
Articles / Web Development / ASP.NET
Article

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 259.7K   7K   92   31
Lightweight HTML table based (no image) progress bar

Sample Image - ProgressBar.gif

Introduction

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.

VB
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> _
        </TD></TR></TABLE>"
    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.

VB
If Integer.Parse(percent) < 25 Then
    'only start showing at 25%
    lblProgress.Visible = False
Else
    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.

History

  • First upload: 9/9/2003.

License

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


Written By
Web Developer
United States United States
Steve is a software developer working in Minneapolis, MN.

Comments and Discussions

 
AnswerRe: Will this work with C# Pin
kbomb9877-Nov-07 9:46
kbomb9877-Nov-07 9:46 
GeneralDivs.. Pin
Rocky Moore11-Sep-03 16:33
Rocky Moore11-Sep-03 16:33 
GeneralRe: Divs.. Pin
Steven Campbell12-Sep-03 2:40
Steven Campbell12-Sep-03 2:40 
Thats a great suggestion. At the time I wrote the code, my CSS knowledge was extremely limited, but every day I see new and wonderful uses like this Big Grin | :-D
GeneralRe: Divs.. Pin
Adil Ali Asghar3-Jul-04 1:29
Adil Ali Asghar3-Jul-04 1:29 
GeneralPostback Pin
Nick Seng9-Sep-03 15:24
Nick Seng9-Sep-03 15:24 
GeneralRe: Postback Pin
Steven Campbell9-Sep-03 17:09
Steven Campbell9-Sep-03 17:09 

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.