In this tutorial you will learn to create and simulate a progress bar in Visual Basic, great for using it if you have a step by step application and the progress bar will count the steps ending with a great result. For this we will use Visual Studio 2010.

Difficulty: Intermediate

If you prefer to watch the Video Tutorial instead of reading, you can view it here.

HD Video Tutorial

Step 1 - Create a New Document

To create a new project you can simply go to File - New - Project (CTRL+SHIFT+N).

Step 2 - Create the Progress Bar

From the Toolbox Toolbar (CTRL+ALT+X) drag and drop Progress Bar Item to main form and re-size it.

On the Properties Panel, if you'll change the value to any number you will notice that your bar will have the loading state to the value chosen by you.

Step 3 - Adding Buttons

The main objective is to increase the bar value using a button, the same like completing a form and you click next and going to the next step. So, add 2 buttons in your main form. Just drag and drop the Button Item from your Toolbox and name them "Back" and "Next Step".

To change the text from your buttons, select a button and go to Properties Panel and search the Text Property.

Step 4 - Adding the Code for Buttons

Just a quick reminder to understand everything! Our buttons from tutorial will have the instance name as below:

Button1 = "Back" Button
Button2 = "Next Step" Button

Now let create the code "Next Step" Button. Lets suppose we have 5 steps and the bar should increase with 20% every time you press the button. To write the code, just double click on the button.

By default Visual Basic, when double clicking a button, it will create a Click Event for that button.

So to increase the progress bar value with 20 you need to write the code below. Also DO NOT forget to revert the value back to 0 to your bar.

If you don't want to do that you can initialize the bar value from the beginning of the program by double clicking the main from window to start a event where you can write your code for your objects. Here is the whole code below:

Public Class Form1

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
	ProgressBar1.Value = 0
End Sub

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
	ProgressBar1.Value += 20
End Sub

End Class

Note

If your bar value will pass over 100 percent, an error will appear, because the value is between 0 and 100, so you need to create a new condition.

Writing the If Condition

In this case, to write the if condition we need to make the "Next Step" button disappear if the progress bar has the value 80 or bigger. Write the code below into your button click event:

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
	If ProgressBar1.Value >= 80 Then
		ProgressBar1.Value += 20
		Button2.Visible = False
	Else
		ProgressBar1.Value += 20
	End If
End Sub

Test everything by Pressing F5 or go to Debug - Start Debugging from main menu. You should have something like the GIF Animation below, so be sure to click and view it:

Step 5 - The Back Button

Now we need to create the code for the Back Button. To do that you need to think first what your button need to do:

in the beginning, button must start disabled, so users can't click
button must Decrease the value of the bar with 20
button must be disabled if the bar value goes under 20 or if the bar value is 100

First disable the button when the application starts. Include the enable code in your Form Load Event:

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
	ProgressBar1.Value = 0
	Button1.Enabled = False
End Sub

Then you can add the code for Click Event to your button. Double click it to create On Click Event and put the code below:

If ProgressBar1.Value = 20 Then
	Button1.Enabled = False
	ProgressBar1.Value -= 20
Else
	ProgressBar1.Value -= 20
End If

Step 6 - Adding a "Finish" Button

To make your application even cooler, we will change the text from "Next Step" to "Finish" and when the user will click it, the application will end. Delete everything you have on your Next Step Click Event and write the code below:

If ProgressBar1.Value >= 80 Then
	If ProgressBar1.Value < 100 Then
		ProgressBar1.Value += 20
		Button1.Enabled = False
		Button2.Text = "Finish"
	Else
		End
	End If
Else
	ProgressBar1.Value += 20
	If ProgressBar1.Value > 0 Then
		Button1.Enabled = True
	End If
End If

What you did above was to add another condition if the bar value is strictly below 100, bar should increase one more time to reach the end and the "Next Step" Button should change his text into "Finish".

Else, if the value is detected higher than 100 the application will end. Check the results below.

Final Results

In the end ALL your code should look like this:

Public Class Form1

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        ProgressBar1.Value = 0
        Button1.Enabled = False
    End Sub

    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        If ProgressBar1.Value >= 80 Then
            If ProgressBar1.Value < 100 Then
                ProgressBar1.Value += 20
                Button1.Enabled = False
                Button2.Text = "Finish"
            Else
                End
            End If
        Else
            ProgressBar1.Value += 20
            If ProgressBar1.Value > 0 Then
                Button1.Enabled = True
            End If
        End If
    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        If ProgressBar1.Value = 20 Then
            Button1.Enabled = False
            ProgressBar1.Value -= 20
        Else
            ProgressBar1.Value -= 20
        End If
    End Sub
End Class