How to Create a FiveM Loading Screen

A current FiveM loading screen is an NUI resource declared with loadscreen w fxmanifest.lua. Keep the first version local and small: one HTML document, one stylesheet and one script. Add progress or server handover data only after the basic screen opens and closes correctly.

Back up the existing resource and keep the default automatic shutdown first. A broken manual-shutdown script can leave players looking at the loading screen after the game is ready.

Resource structure

resources/[local]/my_loadscreen/
├── fxmanifest.lua
└── html/
    ├── index.html
    ├── style.css
    └── app.js

fxmanifest.lua:

fx_version 'cerulean'
game 'gta5'

author 'Your name'
description 'FiveM loading screen'
version '1.0.0'

loadscreen 'html/index.html'

files {
    'html/index.html',
    'html/style.css',
    'html/app.js'
}

New resources should use fxmanifest.lua. Do not add a legacy __resource.lua fallback. The directives are defined in the official resource manifest reference.

Create accessible HTML

html/index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Connecting to Example RP</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <h1>Connecting to Example RP</h1>
    <progress id="progress" value="0" max="1" aria-label="Loading progress"></progress>
    <p id="status" aria-live="polite">Loading server resources…</p>
  </main>
  <script src="app.js"></script>
</body>
</html>

Use text that remains readable over the background, respects reduced motion and does not depend on autoplay audio. Compress images and video before packaging them; every client has to download the resource.

Read the documented loading progress event

html/app.js:

const progress = document.getElementById('progress');
const status = document.getElementById('status');

window.addEventListener('message', (event) => {
  if (event.data?.eventName !== 'loadProgress') return;

  const value = Number(event.data.loadFraction);
  if (!Number.isFinite(value)) return;

  const clamped = Math.max(0, Math.min(1, value));
  progress.value = clamped;
  status.textContent = `Loading ${Math.round(clamped * 100)}%`;
});

The official Cfx.re loading-screen guide documents loadProgress and the other events exposed to this NUI frame. Treat event data as input and update text with textContent, not innerHTML.

Pass only safe handover data

A server-side playerConnecting handler can pass small values with deferrals.handover. FiveM exposes them as window.nuiHandoverData. Use this for display values such as a player name; never include secrets, tokens, private identifiers or data that grants an entitlement. Insert player-controlled values with textContent Lub innerText.

Enable manual shutdown only when required

If the screen must fade out after client scripts start, add these lines:

loadscreen_manual_shutdown 'yes'
client_script 'client.lua'

Then close it from client.lua after the actual client-ready condition:

CreateThread(function()
    while not NetworkIsSessionStarted() do
        Wait(100)
    end

    ShutdownLoadingScreenNui()
end)

Test reconnects, resource restarts and a slow client. If the screen can remain stuck, remove loadscreen_manual_shutdown and the client script to return to automatic lifecycle handling.

Deploy and verify

Dodaj ensure my_loadscreen to the intended point in server.cfg.
Używać refresh I ensure my_loadscreen on a development server.
Connect with a clean client and inspect F8 plus the server console.
Test a slow connection, reconnect, cancelled connection and server restart.
Check common desktop resolutions and a low-powered client before replacing the production resource.