# Bunifu Color Transition

 Bunifu Color Transition is a component that makes possible the transition of various colors from one color-state to another. It's super useful when you want to show different states/progression of an activity or task.

Here's a preview of the component in action:

![](https://downloads.intercomcdn.com/i/o/101725035/4296b099ed9bc0bf2a338b69/bunifu-color-transition-sample-01.gif)

![](https://downloads.intercomcdn.com/i/o/102448883/1088a7531a1068ae87b9d691/bunifu-color-transition-sample-02.gif)

Simply locate `BunifuColorTransition`  control in your toolbox and drag it on to your form. You can then customize using custom properties as it will be elaborated later in this article.

![](https://downloads.intercomcdn.com/i/o/73325069/98cadda1374b9b6392cd431b/1-25\[1].png)

## Properties

When you click on the component and go to the **Properties** Tab, we’ll see the following properties:

![](https://downloads.intercomcdn.com/i/o/75127100/1d05e31807717f5a9e35c0fb/image.png)

### **`StartColor`**

is the start color (the initial color) and `EndColor`  is the target color (the color that stops the transition).

### **`ProgressValue`**

is a value between 0 and 100 that sets the gradient between the `StartColor`  and `EndColor` .

### **`Value`**

is the current value of the transition (the intermediate color between `StartColor`  and `EndColor` , specified by the Progress Value property)

### **`AutoTransition`**

is a boolean that allows you to set automatic transition of specific TransitionControl.

### **`ColorArray`**

is array of colors to transition from and to.

### **`Interval`**

is the speed of transition between the color arrays.

We want to change the background color of our form (BackColor) in a gradient from White to Red according to the value pointed by a Bunifu TrackBar.

So let’s add that track bar to our form and after we place it on our form, let’s go to “Properties” tab and then on “Events” and then scroll down until we find the `ValueChanged` event:

![](https://downloads.intercomcdn.com/i/o/73325927/1cfa2732a375e67a83702413/4-8\[1].png)

Using the event handler we will add the code below:

**C# code**

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

```csharp
private void bunifuTrackbar1_ValueChanged(object sender, EventArgs e)
{   

    bunifuColorTransition1.ProgessValue = bunifuTrackbar1.Value;
    this.BackColor = bunifuColorTransition1.Value;
    
}

```

{% endtab %}

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

```
Private Sub BunifuTrackbar1_ValueChanged(ByVal sender As Object, 
    ByVal e As EventArgs) 

    Handles BunifuTrackbar1.ValueChanged    
    BunifuColorTransition1.ProgessValue = BunifuTrackbar1.Value
    BackColor = BunifuColorTransition1.Value 

End Sub
```

{% endtab %}
{% endtabs %}

The code above sets the progress value of our Bunifu Color Component, to the track bar value. After that we set the back color of our form to the Value pointed by our component.

![](https://downloads.intercomcdn.com/i/o/73326436/61da11c2a43e63128f6730aa/6-3\[1].png)

![](https://downloads.intercomcdn.com/i/o/73326463/8cf559e57f5320459fe73916/6-3\[1].png)

![](https://downloads.intercomcdn.com/i/o/73326482/f7e7bcf005e750991a9b906e/7-3\[1].png)

If you wish to create a splash screen using Bunifu Color Transition set the following properties

![](https://downloads.intercomcdn.com/i/o/75130043/071b122d46425005642705e5/image.png)