Progress bars indicate the progress of a particular task that requires wait time for the operation to be completed.

We have taken the normal progress bar a notch higher with Bunifu Progress Bar which supports further customization.  

Adding Bunifu Progress Bar to a Form at Design-time

Simply locate Bunifu Progress Bar in your toolbox and drag it to your form 

Adding Bunifu Progress Bar to a Form at Runtime

Simply add progress bar at run time using the Load event. To link the Load event to our form, we simply have to double click on our form (on the window) and we will be directed to the code view the form.

C# code

public partial class Form1 : Form
{
      public Form1()
      {
           InitializeComponent();
      }
 
      private void Form1_Load(object sender, EventArgs e)
      {

         var newProgressBar = new   Bunifu.UI.WinForms.BunifuProgressBar();this.Controls.Add(newProgressBar);
 
      }
}

VB.NET code

Public Class Form1
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

 Dim newProgressBar As New Bunifu.Framework.UI.BunifuPtogressBar
Me.Controls.Add(newProgressBar);

End Sub
End Class

On running the code you should see something like this

Implementation and custom properties customization

We have loaded Bunifu Progress Bar with unique properties such as setting animations, changing the back color, having a mixed color which will produce a gradient fill, and also setting the border color, border radius, and border thickness. Utilize any these properties until you achieve the desired look in your progress bars. 

  • Animation - This property together with AnimationStep will make your prpgress bar appear to move in stylish motion or what most designers call parallax. The animation property sets out the speed of the animation occurrence
  • AnimationStep - This is a nifty property that allows you to make your progress bar to seem to have an appearance of its shadows as it moves

C# code

newProgressBar.Animation = 4;
newProgressBar.AnimationStep = 1;

VB.NET code

newProgressBar.Animation = 4
newProgressBar.AnimationStep = 1 

How to implement Bunifu Progress Bar animations using a Timer

We will first declare our BunifuProgressBar object to be a class-level variable by moving it from the form_load function.

C# code

public partial class Form1 : Form

{

Bunifu.UI.Winforms.BunifuProgressBar newProgressBar = newBunifu.UI.Winforms.BunifuProgressBar();

}

VB.NET code

Partial Public Class Form1

Private newProgressBar As Bunifu.UI.Winforms.BunifuProgressBar = newBunifu.UI.Winforms.BunifuProgressBar()

End Class

Then having the timer object dragged in the design window, we can now use its function to manipulate our progress bar such that if its value reaches a certain percentage, it should set the progress value to a different percentage value. Here’s the code:

C# code

private void Timer1_Tick(object sender, EventArgs e)
        {
            newProgressBar.Value += 1;
 
            if (newProgressBar.Value == 70)
            {
                newProgressBar.Value = 10;
            }
          } 

VB.NET code

Private Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs)

newProgressBar.Value += 1

If newProgressBar.Value = 70 Then

newProgressBar.Value = 10

End If

End Sub

How to apply gradient color to Bunifu Progress Bar

Simply achieve this by assigning different colors to the ProgressColorLeft property and ProgressColorRight property. This is show in the code below. 

C# code

newProgressBar.progressColorLeft= Color.FromArgb(63, 81, 181);
newProgressBar.progressColorRight= Color.FromArgb(255, 128, 128);
newProgressBar.progressBackColor= Color.FromArgb(39,53, 85);

VB.NET code

newProgressBar.progressColorLeft= Color.FromArgb(63, 81, 181)
newProgressBar.progressColorRight= Color.FromArgb(255, 128, 128)
newProgressBar.progressBackColor= Color.FromArgb(39,53, 85)


How to set border thickness, size, radius and position Bunifu Progress Bar

Assign the code with the properties below:

C# code

newProgressBar.BorderThickness = 2;
newProgressBar.BorderRadius = 1;
newProgressBar.Location = new Point(100,100);
newProgressBar.Size = new Size(284, 21);

VB.NET code

newProgressBar.BorderThickness = 2
newProgressBar.BorderRadius = 1
newProgressBar.Location = new Point(100,100)
newProgressBar.Size = new Size(284, 21)

On running your code you should see something like this:

That's it!

You can now create more stylish progress bars that we hope will make your UI look stunning and provide better user experience to your users. 

Should you have feedback or suggestions please send us via chat on the bottom right corner of the screen.

Did this answer your question?