> ## Documentation Index
> Fetch the complete documentation index at: https://lationscripts.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Modern UI - Progress

> Progress bar with optional multi-step feature & more

## Quick Start

```lua theme={null}
local success = exports.lation_ui:progressBar({
    label = 'Processing',
    description = 'Please wait...',
    duration = 5000,
    icon = 'fas fa-spinner'
})

if success then
    print('Progress completed')
else
    print('Progress cancelled')
end
```

## Functions

<AccordionGroup>
  <Accordion title="progressBar" icon="spinner">
    Show a progress bar to the player.

    ```lua theme={null}
    local success = exports.lation_ui:progressBar(data)
    ```

    **Parameters:**

    * `data` (table) - Progress bar configuration object (see [Options](#options))

    **Returns:**

    * `success` (boolean) - `true` if completed, `false` if cancelled/failed
  </Accordion>

  <Accordion title="progressActive" icon="circle-question">
    Check if a progress bar is currently active.

    ```lua theme={null}
    local isActive = exports.lation_ui:progressActive()
    ```

    **Returns:**

    * `isActive` (boolean) - `true` if progress is active, `false` otherwise
  </Accordion>

  <Accordion title="cancelProgress" icon="xmark">
    Cancel the currently active progress bar.

    ```lua theme={null}
    exports.lation_ui:cancelProgress()
    ```
  </Accordion>
</AccordionGroup>

## Configuration

### Options

<ParamField path="label" type="string" required>
  Progress bar label text
</ParamField>

<ParamField path="description" type="string">
  Progress description text

  <Note>
    Overridden by steps if multi-step feature is used
  </Note>
</ParamField>

<ParamField path="duration" type="number" required>
  Duration in milliseconds
</ParamField>

<ParamField path="icon" type="string">
  FontAwesome icon class
</ParamField>

<ParamField path="iconColor" default="#71717A" type="string">
  Icon color (hex or [CSS color name](https://htmlcolorcodes.com/color-names/))
</ParamField>

<ParamField path="iconAnimation" type="string">
  Icon animation type

  Available options: `'spin'`, `'spinPulse'`, `'spinReverse'`, `'pulse'`, `'beat'`, `'fade'`, `'beatFade'`, `'bounce'`, `'shake'`
</ParamField>

<ParamField path="color" default="#3B82F6" type="string">
  Progress bar color (hex or [CSS color name](https://htmlcolorcodes.com/color-names/))
</ParamField>

<ParamField path="steps" type="table">
  Array of step objects with descriptions for multi-step progress (see [Steps](#steps))
</ParamField>

<ParamField path="canCancel" default="true" type="boolean">
  Whether progress can be cancelled with X key
</ParamField>

<ParamField path="useWhileDead" default="false" type="boolean">
  Allow progress while player is dead
</ParamField>

<ParamField path="allowRagdoll" default="false" type="boolean">
  Allow progress while player is ragdolled
</ParamField>

<ParamField path="allowCuffed" default="false" type="boolean">
  Allow progress while player is cuffed
</ParamField>

<ParamField path="allowFalling" default="false" type="boolean">
  Allow progress while player is falling
</ParamField>

<ParamField path="allowSwimming" default="false" type="boolean">
  Allow progress while player is swimming
</ParamField>

<ParamField path="anim" type="table">
  Animation configuration (see [Animations](#animations))
</ParamField>

<ParamField path="prop" type="table">
  Prop configuration (see [Props](#props))
</ParamField>

<ParamField path="disable" type="table">
  Controls to disable during progress (see [Disable](#disable))
</ParamField>

### Steps

Each step object in the `steps` array supports:

<ParamField path="description" type="string" required>
  Description text for this step
</ParamField>

**Example:**

```lua theme={null}
steps = {
    { description = 'Connecting to server...' },
    { description = 'Bypassing security protocols...' },
    { description = 'Establishing secure connection...' },
    { description = 'Hack in progress...' }
}
```

### Animations

<ParamField path="dict" type="string">
  Animation dictionary

  <Note>
    Either `dict` or `scenario` is required if using animations
  </Note>
</ParamField>

<ParamField path="clip" type="string" required>
  Animation clip name
</ParamField>

<ParamField path="flag" default="49" type="number">
  Animation flags
</ParamField>

<ParamField path="blendIn" default="3.0" type="number">
  Blend in speed
</ParamField>

<ParamField path="blendOut" default="1.0" type="number">
  Blend out speed
</ParamField>

<ParamField path="duration" default="-1" type="number">
  Animation duration (-1 for loop)
</ParamField>

<ParamField path="playbackRate" default="0" type="number">
  Playback rate
</ParamField>

<ParamField path="lockX" default="false" type="boolean">
  Lock X axis
</ParamField>

<ParamField path="lockY" default="false" type="boolean">
  Lock Y axis
</ParamField>

<ParamField path="lockZ" default="false" type="boolean">
  Lock Z axis
</ParamField>

<ParamField path="scenario" type="string">
  Scenario name (alternative to dict/clip)

  <Note>
    Either `dict` or `scenario` is required if using animations
  </Note>
</ParamField>

<ParamField path="playEnter" default="true" type="boolean">
  Play enter animation for scenarios
</ParamField>

### Props

<ParamField path="model" type="string" required>
  Prop model hash
</ParamField>

<ParamField path="bone" default="60309" type="number">
  Bone index to attach prop to
</ParamField>

<ParamField path="pos" type="table" required>
  Position offset as table: `{x, y, z}`
</ParamField>

<ParamField path="rot" type="table" required>
  Rotation offset as table: `{x, y, z}`
</ParamField>

<ParamField path="rotOrder" default="0" type="number">
  Rotation order
</ParamField>

### Disable

<ParamField path="move" default="false" type="boolean">
  Disable player movement
</ParamField>

<ParamField path="sprint" default="false" type="boolean">
  Disable sprinting only
</ParamField>

<ParamField path="car" default="false" type="boolean">
  Disable vehicle controls
</ParamField>

<ParamField path="combat" default="false" type="boolean">
  Disable combat actions
</ParamField>

<ParamField path="mouse" default="false" type="boolean">
  Disable mouse look
</ParamField>

## Preview

<Frame>
  <img src="https://mintcdn.com/lationscripts/Ti0acW9JT3q4BC3Y/resources/modern-ui/components/progress/example.webp?fit=max&auto=format&n=Ti0acW9JT3q4BC3Y&q=85&s=e4f66e9fbbcc79b44211b277c36a39d5" alt="Progress Bar Preview" width="936" height="396" data-path="resources/modern-ui/components/progress/example.webp" />
</Frame>
