# Bunifu Loader

## Overview

**Bunifu Loade**r is a  custom .NET control that enables you to quickly generate infinite loaders for indeterminate operations and tasks. It has a set of pre-built styled loader presets for you to choose suitable for your application. It is highly customizable and requires no complex procedures to set it up.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MhquAArg4kM4iSknENm%2F-MhquOZJHeYaLMUQfVnU%2Fld05.gif?alt=media\&token=c8feecf3-d16b-45e1-ac9b-66ab49f25583)

## Getting Started

This section describes adding Bunifu Loader at the designer level and during a runtime event.

### Adding Bunifu Loader at Design Time

Bunifu Loader can be added to a Form by simply locating **`BunifuLoader`** in your Visual Studio toolbox, and dragging it to the form as demonstrated below. You can quickly customize the control using its properties in the smart tag. Later in this documentation, we will get into deeper detail about its features.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MhmDratMit-UJCuqOvX%2F-Mhn9IeHfM_KVf4YUhbj%2Fld02.gif?alt=media\&token=2ba33e3a-5101-47c5-b9ee-a275a87474be)

### Adding Bunifu Loader at Runtime

To add Bunifu Loader at runtime, we will use the Form's load event to instantiate `BunifuLoader` and add it to the form as shown in the codes below:

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

```csharp
private void Form1_Load(object sender, EventArgs e)
{
    //instantiate Bunifu Loader using Bunifu.UI.WinForms
    BunifuLoader bunifuLoader = new BunifuLoader();
    // set the location of the loader
    bunifuLoader.Location = new Point(228, 110);
    //set the size of the loader
    bunifuLoader.Size = new Size(172, 165);
    //set the color for the loader
    bunifuLoader.Color = Color.DodgerBlue;
    //add the loader to the form
    this.Controls.Add(bunifuLoader);

}
```

{% endtab %}

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

```erlang
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	'instantiate Bunifu Loader using Bunifu.UI.WinForms
	Dim bunifuLoader As New BunifuLoader()
	' set the location of the loader
	bunifuLoader.Location = New Point(228, 110)
	'set the size of the loader
	bunifuLoader.Size = New Size(172, 165)
	'set the color for the loader
	bunifuLoader.Color = Color.DodgerBlue
	'add the loader to the form
	Me.Controls.Add(bunifuLoader)

End Sub

```

{% endtab %}
{% endtabs %}

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

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MhbQrGcefG7--s0ioLS%2F-MhbizryqqIG06GhVgvM%2Fimage.png?alt=media\&token=532dcb32-d74c-4451-8bfa-318721c2cb61)

## Loader Properties

### `1. AllowStylePresets`

This property allows you to get or set a boolean value, which determines whether you can utilize the Preset property to customize the appearance of the loader. By default, the property is set to **true.**

### `2. CapStyle`

This property allows you to get or set a style ( cap enumeration) for the indicator. The enumeration defines the following values: **`Flat`**, **`Round`** and **`Triangle`**.

### `3. Color`

This property allows you to get or set a color value for the indicator. It supports the use of RGB and HEX color values.

### `4. DashWidth`

This property allows you to get or set the array pattern (double) for the dashed, dotted, and diamond ring style. The value determines the array of the dashes. A greater value results in fewer arrayed elements for the loader.

### `5. Preset`

This property allows you to get or set the indicator style (preset enumeration) for the loader. The property works similarly as the **`RingStyle`** which sets the progress ring style for the loader.  The enumeration defines the following values: **`Solid`**, **`Dashed`**, **`Dotted`** and **`Diamond`**.

{% hint style="info" %}
This property works when the **`AllowStylePreset`** is set to **true**. Also, the property gets overridden if the **`RingStyle`** property is updated with a new value.
{% endhint %}

### `6. RingStyle`

This property allows you to get or set the indicator style (ring enumeration) for the loader. The enumeration defines the following values: **`Solid`**, **`Dashed`**, **`Dotted`** and **`Diamond.`**

{% hint style="info" %}
This property gets overridden if the **`preset`** property is updated with a new value.
{% endhint %}

### `7. Speed`

This property allows you to get or set the speed (int) of the loader's indicator. The greater the value, the more the speed. The default speed value is **10.**

### `8. Thickness`

This property allows you to set the indicator's thickness(int). A greater value results in a unique loader style based on the ring style chosen for the loader. The default thickness value is **7.**

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mhquce-1U80T1J6IHO4%2F-Mhr4FnSTVs1Lv2H62FO%2Fld13.gif?alt=media\&token=bc9b7a98-4296-46b1-a5b7-18cd0b36b00e)

## Text Properties

### `1. ShowText`

This property allows you to get or set a boolean value, which determines whether or not the label text should be shown beneath the loader's indicator.

### `2. Text`

This property allows you to get or set a text string for the loader control.

### `3. ForeColor`

This property allows you to get or set a color value for the text rendered in the control. It supports the use of RGB and HEX color values.

### `4. Font`

This property allows you to get or set an array of font styles for the text rendered in the control. You can set, for example, the `font-family,` the `font-size` and much more.

### `5. TextPadding`

This property allows you to get or set an array of padding values(int) that create spacings between the text and the defined borders of the loader control.

## Remarks

You can now generate more elegant loaders, which we hope 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.