Progress Bar in FiveM — Create Immersive Actions with M2.Progress

The progress bar is one of the most important UI elements on the FiveM server, helping players know what they're doing and how long they'll have to wait. M2.Progress is a library designed specifically for this purpose.

What is M2.Progress?

M2.Progress is a port from mythic_progbar with 4 callbacks covering all use cases:

1. Simple — Simple progress bar, no callback along the way.
2. withStart — There is a callback at the start.
3. withTick — There is a callback every tick.
4. withStartAndTick — both start and tick callback

Usage

1. Simple Progress Bar

exports['M2.Progress']:Progress({
    name = 'drink_water',
    duration = 3000,
    label = 'Drinking water...',
    useWhileDead = false,
    canCancel = true,
    disable = {
        car = true,
        move = true,
        combat = true
    },
    anim = {
        dict = 'mp_player_intdrink',
        clip = 'loop_bottle'
    }
}, function(cancelled)
    if not canceled then
        -- Successfully drank water
        TriggerServerEvent('myScript:drinkWater')
    end
end)

2. withStart Callback

exports['M2.Progress']:ProgressWithStart({
    name = 'repair_car',
    duration = 10000,
    label = 'Car repairs...'  
}, function()
    -- Beginning: equip wrench
    TaskPlayAnim(PlayerPedId(), 'anim@amb@clubhouse@tutorial@bkr_tut_ig3_pl@', 'machinic_loop_mechandplayer', 8.0, -8.0, -1, 1, 0, false, false, false)
end, function(cancelled)
    if not canceled then
        TriggerServerEvent('myScript:repairCar')
    end
end)

3. withTick Callback

exports['M2.Progress']:ProgressWithTick({
    name = 'lockpick',
    duration = 8000,
    label = 'Powering lockpick...',
    canCancel = true
}, function(pct)
    -- pct = 0.0 to 1.0
    if pct > 0.5 then
        -- Halfway there — Change the animation.
    end
end, function(cancelled)
    if not canceled then
        TriggerServerEvent('myScript:unlockCar')
    end
end)

4. withStartAndTick (Full Control)

exports['M2.Progress']:ProgressWithStartAndTick({
    name = 'hacking',
    duration = 15000,
    label = 'Hacking...',
    canCancel = true,
    disable = { move = true, car = true, combat = true }
}, function()
    -- onStart: turn on laptop prop
end, function(pct)
    -- onTick: update visual feedback
end, function(cancelled)
    if not canceled then
        TriggerServerEvent('myScript:hackSuccess')
    else
        -- Player cancels
    end
end)

Configuration Options

Summary

M2.Progress provides maximum flexibility in creating immersive actions for the FiveM server. Four callback formats cover every use case, from simple actions to complex interactions.