How to Add a Custom Loading Screen to Your FiveM Server

Create and install a custom HTML loading screen on your FiveM server with progress tracking and cursor support.

The FiveM loading screen is an HTML page displayed while players connect and load assets. You can replace it with a custom design.

Loading Screen Structure

fxmanifest.lua

index.html

style.css

script.js

logo.png

Install a Loading Screen

Create or download a loading screen

You can build one from scratch (HTML/CSS/JS) or download a pre-made one from the cfx.re Releases forum.

Create the fxmanifest.lua

fx_version 'cerulean'
game { 'gta5' }

loadscreen 'html/index.html'
loadscreen_cursor 'yes'

files {
  'html/index.html',
  'html/style.css',
  'html/script.js',
  'html/logo.png'
}

Directive	Description
`loadscreen`	Path to the HTML file (or a remote URL like `https://example.com/load/`)
`loadscreen_cursor 'yes'`	Enables mouse cursor on the loading screen
`loadscreen_manual_shutdown 'yes'`	Prevents auto-close — requires calling `SHUTDOWN_LOADING_SCREEN_NUI` from a client script

Upload to the server

In the XGamingServer Panel, click Files in the sidebar and upload the folder to resources/.

Add to server.cfg

ensure my_loadscreen

To hide the default loading spinner:

setr sv_showBusySpinnerOnLoadingScreen false

Restart

Start from Console. Players see your custom loading screen when connecting.

Loading Progress

Your loading screen JavaScript can track load progress:

window.addEventListener('message', function(event) {
  if (event.data.eventName === 'loadProgress') {
    // event.data.loadFraction = 0.0 to 1.0
    updateProgressBar(event.data.loadFraction);
  }
});

Server handover data is available via window.nuiHandoverData.

How to Add a Custom Loading Screen to Your FiveM Server

On this page