Make an interesting progress bar

Heres your chance to share your own tutorials with the community. Just post them on here. If your lucky they may even be posted on the main site.
4 posts Page 1 of 1
Contributors
User avatar
RunarM
Hardcore Programmer
Hardcore Programmer
Posts: 508
Joined: Wed Nov 18, 2009 11:33 pm

Make an interesting progress bar
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;
Image
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%:
Image
Here is my 100%:
Image

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.
Image

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)
Image

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

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

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
You do not have the required permissions to view the files attached to this post.
Just another day in my life.
http://www.codexvideos.com
User avatar
Shim
VIP - Donator
VIP - Donator
Posts: 882
Joined: Wed Dec 14, 2011 5:02 am

Re: Make an interesting progress bar
Shim
this is plain aww man but i am not that good in graphics :(
Find my programs on Softpedia
User avatar
3aaBrSbeel
Top Poster
Top Poster
Posts: 139
Joined: Fri Jun 01, 2012 9:34 am

#RunarM, is this a re-post? Because I have seen this before. Anyways, amazing tutorial. Thanks! cooll;
Code'n'Stuff Signature Of 3aaBrSbeel
®║▌│█│║▌║││█║▌║▌║▌
✔ Verified Official Code'n'Stuff account ᵀᴴᴱ ᴼᴿᴵᴳᴵᴻᴬᴸ
Image
User avatar
AnoPem
VIP - Donator
VIP - Donator
Posts: 441
Joined: Sat Jul 24, 2010 10:55 pm

Re: Make an interesting progress bar
AnoPem
3aaBrSbeel wrote:
#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
https://t.me/pump_upp
4 posts Page 1 of 1
Return to “Tutorials”