Click here to Skip to main content
Click here to Skip to main content

A simple progress bar web user control

By , 8 Sep 2003
Rate this:
Please Sign up or sign in to vote.

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.

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.

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)

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 PinmemberMember 1054479217-Mar-14 3:44 
GeneralMy vote of 4 PinmemberLeahAtWork24-Apr-12 17:54 
GeneralThanks lot!!!!!!!! Pinmemberkalim shekh13-Jan-11 20:26 
Generalthanks.../ Pinmemberdakshithaw14-Dec-08 23:11 
QuestionClient-Sever interaction .net Pinmember0700347H30-Nov-08 4:40 
GeneralTrying to convert to C# [modified] PinmemberEkjon5-Nov-08 12:12 
QuestionWebprogressbar and firefox Pinmemberbrambillaa9-Oct-07 23:34 
Generalneed help Pinmemberfaycal_2226-Aug-07 1:31 
Generalthx Pinmemberastena10-Apr-07 22:42 
GeneralRe: thx PinmemberCertain Shadow22-Jul-07 14:25 
GeneralRetrieving the user control progress Pinmemberw_mainwaring5-Feb-07 3:41 

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 | Mobile
Web04 | 2.8.140415.2 | Last Updated 9 Sep 2003
Article Copyright 2003 by Steven Campbell
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid