Click here to Skip to main content
15,867,308 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

 
QuestionSimple Progress Bar Pin
Member 1054479217-Mar-14 3:44
Member 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
kalim shekh13-Jan-11 20:26 
Generalthanks.../ Pin
dakshithaw14-Dec-08 23:11
dakshithaw14-Dec-08 23:11 
QuestionClient-Sever interaction .net Pin
0700347H30-Nov-08 4:40
0700347H30-Nov-08 4:40 
GeneralTrying to convert to C# [modified] Pin
Ekjon5-Nov-08 12:12
Ekjon5-Nov-08 12:12 
QuestionWebprogressbar and firefox Pin
brambillaa9-Oct-07 23:34
brambillaa9-Oct-07 23:34 
Generalneed help Pin
faycal_2226-Aug-07 1:31
faycal_2226-Aug-07 1:31 
Generalthx Pin
astena10-Apr-07 22:42
astena10-Apr-07 22:42 
GeneralRe: thx Pin
Certain Shadow22-Jul-07 14:25
Certain Shadow22-Jul-07 14:25 
GeneralRetrieving the user control progress Pin
w_mainwaring5-Feb-07 3:41
w_mainwaring5-Feb-07 3:41 
GeneralRe: Retrieving the user control progress Pin
Jeffrey Deflers8-Mar-07 3:11
Jeffrey Deflers8-Mar-07 3:11 
I think you only have to do is add runat="server" to this line:
TABLE ID="myTable" cellspacing=0 cellpadding=0 border=1 width=200 <big>runat="server"</</big>>

You're problem with not finding your control should be over.



ArkonXX
Just A Programmer
QuestionQuestion Pin
sheraziii12-Sep-05 0:54
sheraziii12-Sep-05 0:54 
Generallbl doesnt refresh Pin
zoinkydoink27-Nov-04 13:05
zoinkydoink27-Nov-04 13:05 
GeneralRe: lbl doesnt refresh Pin
Steven Campbell28-Nov-04 7:11
Steven Campbell28-Nov-04 7:11 
Generalerror Pin
webber12345625-Nov-04 23:43
webber12345625-Nov-04 23:43 
GeneralRe: error Pin
Steven Campbell26-Nov-04 6:10
Steven Campbell26-Nov-04 6:10 
GeneralRe: error remains Pin
webber12345626-Nov-04 8:29
webber12345626-Nov-04 8:29 
Generalerror Pin
webber12345625-Nov-04 23:39
webber12345625-Nov-04 23:39 
GeneralRe: error Pin
Steven Campbell26-Nov-04 6:09
Steven Campbell26-Nov-04 6:09 
QuestionCompile? Pin
DOTofLTC3-Nov-04 7:39
DOTofLTC3-Nov-04 7:39 
AnswerRe: Compile? Pin
Steven Campbell3-Nov-04 8:27
Steven 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
Mike Ellison13-Oct-03 14:27 
GeneralRe: Will this work with C# Pin
Steven Campbell13-Oct-03 17:29
Steven 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.