How to Add a Working Progress Bar to a FiveM Loading Screen

A static loading screen leaves players wondering if their game has crashed. A functional progress bar provides visual feedback and significantly reduces the number of players who disconnect prematurely. Here is a guide on how to add a working progress bar to your FiveM loading screen.

1. The HTML Structure

First, you need the visual elements in your index.html file. You need a container for the track, and an inner <div> that will fill up.

<div class="progress-container">
    <div id="progress-fill" class="progress-fill"></div>
</div>
<div id="progress-text" class="progress-text">Loading... 0%</div>

2. The CSS Styling

Next, style the bar. We will set the initial width of the fill to 0%, and use a CSS transition to make the movement smooth instead of choppy.

.progress-container {
    width: 400px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    margin: 20px auto;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background-color: #ff3b82; /* Pink accent */
    border-radius: 4px;
    transition: width 0.3s ease-out;
}

.progress-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

3. The JavaScript Integration

The magic happens in JavaScript. The FiveM client sends NUI (New UI) messages to your webpage containing loading data. We need to listen for the loadProgress event.

window.addEventListener('message', function(e) {
    if(e.data.eventName === 'loadProgress') {
        // e.data.loadFraction is a number between 0.0 and 1.0
        let percent = Math.floor(e.data.loadFraction * 100);
        
        // Update the CSS width
        document.getElementById('progress-fill').style.width = percent + '%';
        
        // Update the text
        document.getElementById('progress-text').innerText = 'Loading... ' + percent + '%';
    }
});

Common Issues

• Bar never moves: Ensure your script.js is linked correctly in your HTML and included in your fxmanifest.lua file.
• Bar jumps to 100% instantly: This can happen if you test on a local server with zero resources. A real server takes time to load assets.

The No-Code Solution

Don't want to mess with JavaScript event listeners?