How to Change the Loading Screen on a FiveM Server

To change the loading screen on a FiveM server, either replace the images, music and video inside your current loading screen resource (on QBCore that is resources/[qb]/qb-loading/assets/), or add a new resource whose fxmanifest.lua has loadscreen 'index.html' and lists every file under files, then ensure it and stop the old one. Only one loading screen can run. If the new one uses loadscreen_manual_shutdown 'yes', something on the server must close it, or players stay stuck on it.

What you are working with

These entries come from the FiveM loading screen docs and the resource manifest reference.

Method 1: Rebrand the loading screen you already have

The QBCore recipe in txAdmin installs qb-loading. Its files:

Steps:

1. Press Backup, then download qb-loading so you have the originals.
2. Upload your files over the old ones, keeping the same names. Its manifest already includes assets/**, so new files in those folders are picked up.
3. To use different file names, update the src paths in html/index.html, which point to /assets/....
4. Restart the server and connect to see it.

Music volume is set in html/app.js (audio.volume = 0.05). Keep it low: it plays the moment players connect.

Method 2: Add your own loading screen resource

1. Create the folder

Make resources/[local]/my-loadscreen/ with this layout:

my-loadscreen/
  fxmanifest.lua
  index.html
  style.css
  bg.jpg
  music.mp3

2. Write the manifest

fx_version 'cerulean'
game 'gta5'

loadscreen 'index.html'
loadscreen_cursor 'yes'

files {
    'index.html',
    'style.css',
    'bg.jpg',
    'music.mp3'
}

Leave out loadscreen_manual_shutdown unless you know a script will close the screen (see the gotcha below).

3. Write the page

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="style.css"></head>
<body style="background: url('bg.jpg') center / cover;">
  <h1>Welcome to My City</h1>
  <div id="bar"><div id="fill"></div></div>
  <audio src="music.mp3" autoplay loop></audio>
  <script>
    window.addEventListener('message', (e) => {
      if (e.data.eventName === 'loadProgress') {
        document.getElementById('fill').style.width = (e.data.loadFraction * 100) + '%';
      }
    });
  </script>
</body>
</html>

FiveM sends the page loadProgress messages while the game loads, so a progress bar is a few lines of JavaScript.

4. Swap it in

In server.cfg (txAdmin: CFG Editor), remove or comment out the old one and start yours:

# ensure qb-loading
ensure my-loadscreen
setr sv_showBusySpinnerOnLoadingScreen false

On QBCore, qb-loading sits inside [qb] and starts with ensure [qb], so commenting a line is not enough. Move the qb-loading folder out of [qb], or delete it after backing up. Restart the whole server.

The gotcha: the screen that never closes

loadscreen_manual_shutdown 'yes' tells FiveM not to close the loading screen when the game finishes loading. Something has to call ShutdownLoadingScreenNui() later. On QBCore that is qb-multicharacter, which closes it when the character selector opens, and that is why qb-loading uses manual shutdown.

Problems start when the pieces do not match:

• Manual shutdown screen on a server with nothing to close it (a CFX Default server, or one where the multicharacter script was removed): players hear the game load behind the screen and then sit there forever. Remove the loadscreen_manual_shutdown line, or add a client script that calls ShutdownLoadingScreenNui() once the player has spawned.
• Two loading screen resources running: only one is shown, and which one depends on start order. Paid loading screens usually come with their own loadscreen line, so stop the old resource completely.

Common problems

• Old loading screen still shows: the old resource still starts, often through a category like ensure [qb]. Move it out of the folder or delete it.
• Images or music missing: the file is not in files, or the path in index.html has the wrong case. Server file names are case sensitive.
• Stuck on the loading screen: manual shutdown with nothing to close it. See the gotcha.
• Loading screen appears late or slowly: the video or images are huge. Players download the loading screen's files before they see it, so compress the video to a few megabytes and use .jpg or .webp images.
• No mouse to click buttons: add loadscreen_cursor 'yes'.

Loading screens on GamezServers

On a FiveM server from GamezServers, upload your loading screen as a zip in the Files tab and extract it in resources, or use the SFTP login in Settings for bigger media. Edit index.html and fxmanifest.lua right in the browser, change server.cfg in txAdmin's CFG Editor, and press Backup before swapping resources. For more on adding resources, see how to add scripts to a FiveM server.

FAQ

Where is the loading screen on a QBCore server?

It is the qb-loading resource in resources/[qb]/qb-loading/. Images, music and video are in its assets folder.

Can I have music on my FiveM loading screen?

Yes. Add an audio file to the resource, list it in files, and play it from an <audio> tag in the page. Use music you have the rights to and keep the volume low.

Why is my FiveM server stuck on the loading screen?

Usually the loading screen uses loadscreen_manual_shutdown 'yes' and no script calls ShutdownLoadingScreenNui(). Remove the line or add a script that closes it.

Can I run two loading screens?

No. FiveM shows one loading screen, so stop every other resource with a loadscreen line.