Bunifu Progress Bar

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

C#
VB.NET
C#
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
Public Class Form1
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Dim newProgressBar As New Bunifu.Framework.UI.BunifuProgressBar
Me.Controls.Add(newProgressBar);
End Sub
End Class

On running the code you should see something like this

Properties

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

Code

C#
VB.NET
C#
newProgressBar.Animation = 4;
newProgressBar.AnimationStep = 1;
VB.NET
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#
VB.NET
C#
public partial class Form1 : Form
{
Bunifu.UI.Winforms.BunifuProgressBar newProgressBar
= newBunifu.UI.Winforms.BunifuProgressBar();
}
VB.NET
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#
VB.NET
C#
private void Timer1_Tick(object sender, EventArgs e)
{
newProgressBar.Value += 1;
if (newProgressBar.Value == 70)
{
newProgressBar.Value = 10;
}
}
VB.NET
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#
VB.NET
C#
newProgressBar.progressColorLeft= Color.FromArgb(63, 81, 181);
newProgressBar.progressColorRight= Color.FromArgb(255, 128, 128);
newProgressBar.progressBackColor= Color.FromArgb(39,53, 85);
VB.NET
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

C#
VB.NET
C#
newProgressBar.BorderThickness = 2;
newProgressBar.BorderRadius = 1;
newProgressBar.Location = new Point(100,100);
newProgressBar.Size = new Size(284, 21);
VB.NET
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.