# INSTALLATION

## 1. **DOWNLOAD**

The first step is to download the product we have just purchased. To do this we will go to our [KEYMASTER](https://keymaster.fivem.net/asset-grants) account and search for **"Buty-Progress"**.

## 2. DEPENDENCIES AND INSTALLATION

To install it add the resource to your **scripts folder** and put the following in your **SERVER.CFG**:

```lua
ensure Buty-Progress
```

## 3. CONFIG

#### The following will explain all the settings, one of the most important things that I recommend you spend a few minutes to understand in order to offer your users the best possible experience.

{% tabs %}
{% tab title="EXPORTS" %}
{% hint style="info" %}
With Exports you can use the progress bar in any script. You only have to add it to any script.

There are: 

**1. The Basic**, if you do not want to edit a lot of things. 

**2. The Custom**, if you want to edit all the parameters.
{% endhint %}

## Basic Export:

{% code lineNumbers="true" %}

```lua
exports["Buty-Progress"]:on({
        time = 12000, 
        text = "BUTY SHOP BUTY SHOP BUTY SHOP BUTY SHOP BUTY SHOP", 
        color = "linear-gradient(20.5deg, #AC41DE 9.83%, rgba(172, 65, 222, 0) 93.95%)",
        color2 = "#AC41DE",
    })
```

{% endcode %}

## Custom Export:

{% code lineNumbers="true" %}

```lua
    exports["Buty-Progress"]:custom({
        time = 7000, -- TIME
        text = "TEST TEST TEST TEST TEST TEST TEST", --TEXT
        color = "#696569", -- COLOR OF THE INTERIOR OF THE RECTANGLES
        color2 = "#fff", -- BORDER COLOR OF RECTANGLES
        Animations = {
            UseAnim = true, -- DO YOU WANT AN ANIMATION TO BE DISPLAYED NEXT TO THE BAR?
            Scenario = "WORLD_HUMAN_SMOKING_POT_CLUBHOUSE", -- YOU CAN PUT ANY ANIMATION YOU WANT. YOU WILL ALSO HAVE TO FILL IN THE FOLLOWING PARAMETER. -> https://wiki.rage.mp/index.php?title=Scenarios
            AnimationDictionary = "idle_a",
            Coords = vector3(842.52, 658.76, 34.24), -- THE COORDINATES WHERE THE CHARACTER WILL LOOK WHEN THE PROGRESS BAR IS DISPLAYED
        },
        Cam = {
            UseCam = false, -- DO YOU WANT TO USE A CAMERA POINTING AT THE PLAYER'S FACE WHEN THE PROGRESS BAR IS DISPLAYED?
        }
    })
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="danger" %}
**If you want to edit the rest of the aesthetics or design. You have the HTML open so you can modify the style and everything as you want.**
{% endhint %}

<figure><img src="https://3526868747-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeQWzokUSwvmD8VZ4PFkY%2Fuploads%2FyI7gjtCKq527jxKhOuqn%2Ff2c2394c3fb567505a47a7089228e279c658f7fa.png?alt=media&#x26;token=317ced8f-c63f-4dff-906d-352b585c3fe4" alt=""><figcaption></figcaption></figure>