How to Make a Cool Loading Bar in Visual Basic

Written by kevin lee
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Make a Cool Loading Bar in Visual Basic
Colourful loading bars can impress your application's users. (Polka Dot Images/Polka Dot/Getty Images)

Some applications simply load when you launch them. Others load with style. You can make your Visual Basic applications stand out from the digital crowd by adding a customised loading bar to the program's start-up form. You won't find a loading bar in the Visual Studio toolbox, but you will find components you can use to build one. Simply drag a few controls onto your form, tweak their colours and impress your users with a cool animated loading bar that greets them when they launch your application.

Skill level:


  1. 1

    Launch Visual Studio and open one of your Visual Basic.NET projects. Open the Solution Explorer that contains the project's files if it Is not open.

  2. 2

    Locate the icon for your project's start-up form in the Solution Explorer. Double-click that icon. Visual Studio opens the design window and displays the form.

  3. 3

    Open the toolbox and drag a "GroupBox" control onto the form. Return to the toolbox and drag a "ProgressBar" control into the group box you added to the form.

  4. 4

    Return to the toolbox and drag a "Label" control onto the form. Click that label and drag it above the progress bar you added to the form. Position the label and progress bar so that their left edges align.

  5. 5

    Return to the toolbox a final time, and drag a "Timer" control onto the form. Close the toolbox.

  1. 1

    Click the timer that you added to the form, and press "F4" to open the "Properties" window. Click the "Events" icon at the top of that window to display a list of events.

  2. 2

    Double-click the "Tick" event. Visual Studio opens the code window and displays the "Timer1_Tick" sub. This sub runs whenever the timer ticks.

  3. 3

    Paste the following code within the body of that sub:

    loadingBarValue += increment

    If loadingBarValue > 100 Then

    loadingBarValue = 100


    GroupBox1.Visible = False

    End If

    ProgressBar1.Value = loadingBarValue

    The final statement causes the progress bar's visual indicator to move by the value stored in the variable named "loadingBarValue." That variable - set to zero when your form loads - increases by the value stored in the "increment" variable. Since the value of "increment" is 1, the value of "loadingBarValue" increases by 1 every time the "Load" sub runs. When the progress bar's value reaches the maximum value of 100, the timer stops. The group box containing the progress bar and the label disappears automatically.

  4. 4

    Press "F7" to return to the design view and double-click the form's title bar. Visual Studio opens the code window again and displays the form's "Load" sub. Paste the following code within the body of that sub:

    loadingBarValue = 0

    Timer1.Interval = 200

    increment = 1

    GroupBox1.Text = ""

    Label1.Text = "Loading"

    Label1.BackColor = Color.Transparent

    Label1.ForeColor = Color.Green


    The first statement initialises the "LoadingBarValue" to zero. The second statement sets the number of milliseconds the timer pauses between clicks. That value is 200 in this example. Making this number larger makes the loading animation move slower. The "increment" variable determines how far the progress bar moves whenever the timer ticks. That value is 1. Making this value larger makes the loading animation move faster. Change the word "Loading" to anything you like or leave the default value. The next two lines control the label's background and foreground colours. Change those values to any colours you like or leave them as "Transparent" and "Green." The final statement starts the timer.

  5. 5

    Move to the top of the code window and locate the "Class" declaration. Paste these two statements below that declaration:

    Dim loadingBarValue

    Dim increment

    These two statements define the "loadingBarValue" and "increment" variables described in the previous step.

  6. 6

    Press "F5" to run the project. The progress bar - which looks like a loading bar - appears. The label containing the text you set for the label appears above the bar. An animated green bar moves slowly from left to right on the bar until it reaches the end of the bar. When that happens, the label and bar disappear.

Tips and warnings

  • Position the label and group box anywhere you like on the form by dragging the group box control. Since the label and progress bar are inside the group box, they move as a unit, making it easier to position them. You can also experiment with the colours by changing the label's foreground and background colours to different values. The label's default "green" colour in this example produces a harmonious visual effect because its colour matches the colour of the animated bar that moves from left to right as your application loads.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.