Bunifu Progress Bar

Complete customization for appearance of the progress for a better user experience.

Overview

Bunifu Progress bar is a.NET control, that simulates the progress of a task with customizable visuals. We have taken the normal progress bar a notch higher with features such as the ability to visualize progress in multiple orientations, the ability to customize progress ranges with gradient colors, and the ability to set rich progress animations.

Getting Started

Adding Bunifu Progress Bar at Design-time

Bunifu Progress Bar can be added by simply locating or searching BunifuProgressBar in your toolbox and dragging it to your form as shown below.

Adding Bunifu Progress Bar at Runtime

Now to add a progress bar at run time, you can go to the form Load event and write or copy the following code snippet below:

C#

private void Form1_Load(object sender, EventArgs e)
{
    //instatiate bunifu progress bar using Bunifu.UI.WinForms
    BunifuProgressBar bunifuProgressBar = new BunifuProgressBar();
    //set a value for the progress bar
    bunifuProgressBar.Value = 80;
    //set the location of the progress bar on the form
    bunifuProgressBar.Location = new Point(180, 165);
    //set the orientation of the progress bar
    bunifuProgressBar.Orientation = Orientation.Horizontal;
    //add the progress bar to the form
    this.Controls.Add(bunifuProgressBar);
}

VB.NET

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	'instatiate bunifu progress bar using Bunifu.UI.WinForms
	Dim bunifuProgressBar As New BunifuProgressBar()
	'set a value for the progress bar
	bunifuProgressBar.Value = 80
	'set the location of the progress bar on the form
	bunifuProgressBar.Location = New Point(180, 165)
	'set the orientation of the progress bar
	bunifuProgressBar.Orientation = Orientation.Horizontal
	'add the progress bar to the form
	Me.Controls.Add(bunifuProgressBar)
End Sub

Let's take a deep dive and get insights into the available properties on Bunifu Progress Bar.

Appearance Properties

1. BackColor

This property allows you to set the background color for the progress track. It allows the use of RGB and HEX color formats.

2. BorderColor

This property gets or sets the color of the control's border. It supports the use of the RGB or the HEX color values.

3. BorderRadius

This property gets or sets the radius truncation for the control's edges. It accepts only integer values as inputs, and the larger the int value, the more rounded the control's edges are.

4. BorderThickness

This property gets or sets the thickness/height of the control's border. Only integer values are allowed in this property.

5. Orientation

This property allows you to get or set a vertical or a horizontal position for the control in Windows Form.

6. Progress Color

The progress indicator color can be set as either a solid or a gradient color. To set a solid color, ensure that the ProgressColorValueLeft and ProgressColorValueRight are set with the same color.

Now to have a gradient color for the progress indicator, you can achieve easily by setting both ProgressColorValueLeft and ProgressColorValueRight properties with different colors.

Value Properties

1. Value

The value property gets or sets the current value of the progress within the range of the maximum and minimum progress values.

Similarly to the value property, the ValueByTransition( only accessible via code) allows you to set the value for the progress bar control and renders its progress at runtime with a smooth animation.

Here's how to set a value using ValueByTransition:

C#

private void Form1_Load(object sender, EventArgs e)
{
    // set the initial value of the progress bar
    bunifuProgressBar1.Value = 0;
    // set the actual value for the progress bar
    bunifuProgressBar1.ValueByTransition = 100;
}

VB.NET

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	' set the initial value of the progress bar
	bunifuProgressBar1.Value = 0
	' set the actual value for the progress bar
	bunifuProgressBar1.ValueByTransition = 100
End Sub

The value of Bunifu Progress bar can as well be set using the TransitionValue() method. It takes two parameters: the first parameter is the progress value, while the second parameter is the time taken in milliseconds required to transition from an initial progress value to the actual progress value.

The code below shows how the method has been used in the form's load event:

C#

private void Form1_Load(object sender, EventArgs e)
   {
       // set the initial value of the progress bar
       bunifuProgressBar1.Value = 0;
       // set the actual value with time taken to transition to the value
       /*
        * First parameter is the progress value
        * Second parameter is time in milliseconds
        */
       bunifuProgressBar1.TransitionValue(92, 1500);
       
   }

VB.NET

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	   ' set the initial value of the progress bar
	   bunifuProgressBar1.Value = 0
	   ' set the actual value with time taken to transition to the value
'       
'        * First parameter is the progress value
'        * Second parameter is time in milliseconds
'        
	   bunifuProgressBar1.TransitionValue(92, 1500)

End Sub

2. Maximum

This property allows you to get or set the higher bound value of the progress range. The default value is set to 100.

3. Minimum

This property allows you to get or set a lower bound value of the progress range. The default value is set to 0.

4. AnimationSpeed

This property allows you to get or set time milliseconds which determines the duration that the progress indicator takes to move within the range of a value. The movement is a rich stylish motion or what most designers call a parallax movement.

The property is used together with the Value and ValueByTransition properties to set the range of the animation. The Value prop is set with the initial/start value while the ValueByTransition is set with the final value of the progress bar.

Take Away

You can now generate more elegant progress bars, which we think will improve the appearance and feel of your UI while also providing a better user experience.

Please contact us via chat in the bottom right corner of the screen if you have feedback or recommendations.