# Bunifu Progress Bar

## 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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MhWIfGl6T9zwkP2zXY3%2F-MhWWzpyyYXVKOUhubBr%2Fpg07.gif?alt=media\&token=a736a08d-4a44-43ec-a8f3-aff34850d8b8)

## 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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MhWIfGl6T9zwkP2zXY3%2F-MhWOxBxMMTDNBp6RxXW%2Fpg06.gif?alt=media\&token=a3fb03d7-1a2e-46f5-bcd6-ccea3ef75df1)

### **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:

{% tabs %}
{% tab title="C#" %}

```csharp
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);
}
```

{% endtab %}

{% tab title="VB.NET" %}

```erlang
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


```

{% endtab %}
{% endtabs %}

{% hint style="success" %}
Let's take a deep dive and get insights into the available properties on Bunifu Progress Bar.
{% endhint %}

## 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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MhXxFXb5kVCCMsutr4G%2F-MhY3dOF4uUay34sv8fv%2Fpg12.gif?alt=media\&token=f9d226e1-a99e-4c0b-a40a-5c9d090601c7)

### `5. Orientation`

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

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MhXuuDdzZj1e2UZX5LA%2F-MhXvhRSPGOCmkTLslwa%2Fpg11.gif?alt=media\&token=69eb64d0-7ba4-4f97-b03e-bda8e28242c4)

### 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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MhXL8h6uePFQ-EGOdvC%2F-MhXl08yU4pL3KnohfPv%2Fpg10.gif?alt=media\&token=9ff1e57d-e108-4774-bc53-cd5c7d2f9eb8)

## 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`:

{% tabs %}
{% tab title="C#" %}

```csharp
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;
}
```

{% endtab %}

{% tab title="VB.NET" %}

```erlang
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

```

{% endtab %}
{% endtabs %}

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:

{% tabs %}
{% tab title="C#" %}

```csharp
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);
       
   }
```

{% endtab %}

{% tab title="VB.NET" %}

```erlang
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

```

{% endtab %}
{% endtabs %}

### `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. 

{% hint style="info" %}
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.
{% endhint %}

## 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.