Solstice-CyberProgress

This script implements a customizable progress bar system for FiveM with support for animations, props, and user interaction. It provides a cyberpunk-styled UI with various control options

Exports

Progress

exports('Progress', function(data, cb))

Parameters

• data (table): Configuration options for the progress bar

  • name (string): Identifier for the progress action

  • duration (number): Duration in milliseconds

  • label (string): Text to display on the progress bar

  • useWhileDead (boolean): Whether the action can be performed while dead

  • canCancel (boolean): Whether the action can be cancelled

  • controlDisables (table): Controls to disable during progress

  • animation (string|table): Animation to play

  • prop (table|string): Props to attach to the player

  • propTwo (table|string): Secondary props to attach

• cb (function): Callback function that receives cancelled status

showCyberProgress

exports('showCyberProgress', function(name, label, duration, useWhileDead, canCancel, disableControls, animation, prop, propTwo, onFinish, onCancel))

Parameters

• name (string): Identifier for the progress action

• label (string): Display text

• duration (number): Duration in milliseconds

• useWhileDead (boolean): Allow while dead

• canCancel (boolean): Allow cancellation

• disableControls (table): Control disable configuration

• animation (string|table): Animation to play

• prop (table): Primary prop configuration

• propTwo (table): Secondary prop configuration

• onFinish (function): Success callback

• onCancel (function): Cancellation callback

Configuration

Animation List

Pre-configured animations available in Config.AnimationList:

• phone: Phone texting animation with phone prop

• tablet: Tablet usage animation with tablet prop

• type: Typing animation

• splice: Wire splicing animation

• search: Searching animation

Control Disable Options

Configure which controls to disable during progress:

{
    disableMovement = false,
    disableCarMovement = false,
    disableMouse = false,
    disableCombat = false
}

Test Command

Built-in test command configuration:

Config.TestCommand = {
    enabled = true,
    commandName = 'testbar',
    defaultDuration = 5000,
    defaultText = "Testing Progress Bar...",
    defaultControls = {
        disableMovement = true,
        disableCarMovement = true,
        disableMouse = false,
        disableCombat = true
    }
}

Usage Examples

Basic Progress Bar

exports['Solstice-CyberProgress']:Progress({
    name = "basic_action",
    duration = 5000,
    label = "Processing...",
    canCancel = true
}, function(cancelled)
    if cancelled then
        print("Action cancelled")
    else
        print("Action completed")
    end
end)

Progress with Animation

exports['Solstice-CyberProgress']:Progress({
    name = "phone_action",
    duration = 10000,
    label = "Sending Message...",
    animation = "phone",
    canCancel = true,
    controlDisables = {
        disableMovement = true,
        disableCombat = true
    }
}, function(cancelled)
    if not cancelled then
        -- Action complete logic
    end
end)

Custom Animation with Props

exports['Solstice-CyberProgress']:Progress({
    name = "custom_action",
    duration = 8000,
    label = "Custom Action",
    animation = {
        dict = "mini@repair",
        anim = "fixing_a_ped"
    },
    prop = {
        model = "prop_tool_wrench",
        bone = 60309,
        pos = { x = 0.0, y = 0.0, z = 0.0 },
        rot = { x = 0.0, y = 0.0, z = 0.0 }
    }
}, function(cancelled)
    -- Callback logic
end)

Using showCyberProgress

exports['Solstice-CyberProgress']:showCyberProgress(
    "hack_action",
    "Hacking System...",
    10000,
    false,
    true,
    {disableMovement = true},
    "type",
    nil,
    nil,
    function()
        print("Hack completed")
    end,
    function()
        print("Hack cancelled")
    end
)

QB Intergration

Go to qb-core/client/functions.lua and replace with the one below

function QBCore.Functions.Progressbar(name, label, duration, useWhileDead, canCancel, disableControls, animation, prop, propTwo, onFinish, onCancel)
    if GetResourceState('Solstice-CyberProgress') ~= 'started' then error('Solstice-CyberProgress needs to be started in order for QBCore.Functions.Progressbar to work') end
    exports['Solstice-CyberProgress']:Progress({
        name = name:lower(),
        duration = duration,
        label = label,
        useWhileDead = useWhileDead,
        canCancel = canCancel,
        controlDisables = disableControls,
        animation = animation,
        prop = prop,
        propTwo = propTwo,
    }, function(cancelled)
        if not cancelled then
            if onFinish then
                onFinish()
            end
        else
            if onCancel then
                onCancel()
            end
        end
    end)
end

UI Customization

The progress bar uses a cyberpunk-styled UI with:

• System ID display

• Real-time system clock

• Progress percentage

• Time remaining

• Custom frames and corners

• Progress markers

The UI can be customized by modifying the HTML and associated CSS styles.

Notes

• Animations and props are automatically cleaned up after completion

• Resources are properly loaded and unloaded

• The script handles resource stops gracefully