Make an interesting progress bar
Posted: Fri Feb 22, 2013 6:30 pm
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:
Now under the code you just wrote type/paste this:
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"
Here is the complete code:
-RunarM
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
^ This will divide your panels width with 100 so we know how much 1% is.Dim cal = Panel1.Width / 100Now under the code you just wrote type/paste this:
Code: Select all
And between "Try" and "Catch ex as Exception" add this:
Try
Catch ex As Exception
End TryCode: Select all
^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 ProgressBar1.Value <= 100 Then
ProgressBar1.Value += 1
Panel2.Width = ProgressBar1.Value * cal
End IfIf 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
If you want it to show how many % you got so far in a label or a title you just add:
Msgbox("It's done")Code: Select all
Me.Text = Progressbar1.value & "%"Here is the complete code:
Code: Select all
Here is an updated source of what we made:
That's 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 & "%"-RunarM