Breadcrumbs

[RunarM]

This is a tutorial on how to create an interesting progress bar!

What do you need for this tutorial?
-Visual basic 2008/2010
-Photoshop (or another image editing software)

Here is an image of what we will be making;

As you can see it's loading through the text, this will work for logos too.


Let's start by opening photoshop or any other image editing software.

1. Make 2 images, one of it at 0% and one at 100%, this is what i made:
Here is my 0%:

Here is my 100%:


2. Now the designing part is done and we can start coding, start by adding a progressbar to your project, just hide it somewhere on the project.


3. Now add 2 panels, the first panel should have dock = fill and the second panel should have dock = left (make sure panel2 is inside panel1)


4. Now add the 0% image you made in panel 1, like this:

and the 100% image you made in panel 2, like this:


5. Now let's start the coding, add a timer with interval 100 and enabled = true.


When you have done that, double click on the timer icon and write:

Code: Select all

Dim cal = Panel1.Width / 100

^ This will divide your panels width with 100 so we know how much 1% is.

Now under the code you just wrote type/paste this:

Code: Select all

Try

        Catch ex As Exception

        End Try

And between "Try" and "Catch ex as Exception" add this:

Code: Select all

If ProgressBar1.Value <= 100 Then
                ProgressBar1.Value += 1
                Panel2.Width = ProgressBar1.Value * cal
            End If

^This will check if progressbar1's value is below 100, if it is - it will add +1 to progressbar1's value and add 1 of 100% to the panel2s width. Since cal is 1% of panel1's width, multiplying cal with progressbar1's value would give us the width panel2 need to have the same % as progressbar1 (if you understand)

If you want the program to open a form, a messagebox or something when it's done just add it between "Catch ex as Exception" and "End try"

Code: Select all

Msgbox("It's done")

If you want it to show how many % you got so far in a label or a title you just add:

Code: Select all

Me.Text = Progressbar1.value & "%"

Here is the complete code:

Code: Select all

Dim cal = Panel1.Width / 100
        Try
            If ProgressBar1.Value <= 100 Then
                ProgressBar1.Value += 1
                Panel2.Width = ProgressBar1.Value * cal
            End If
        Catch ex As Exception
            MsgBox("It's done")
        End Try
        Me.Text = ProgressBar1.Value & "%"

Here is an updated source of what we made:

Progress.zip

That's all.
-RunarM

[Shim]

this is plain aww man but i am not that good in graphics :(

[3aaBrSbeel]

#RunarM, is this a re-post? Because I have seen this before. Anyways, amazing tutorial. Thanks! cooll;

[AnoPem]

#RunarM, is this a re-post? Because I have seen this before. Anyways, amazing tutorial. Thanks! cooll;

Yes it is i asked him to reupload it