The loading screen is the first thing players see when they connect to your FiveM server. By default, FiveM shows a simple screen, but you can replace it entirely with your own design using HTML, CSS and JavaScript. Think of your server logo, background music, a progress bar and server information.
What is a FiveM loading screen?
A loading screen is a resource that FiveM displays while a player connects and downloads all server files. Technically it is a regular web page rendered inside an embedded browser. You can include anything that works on a normal website: images, animations, video, audio and interactive elements.
File structure
Inside the resources folder on your server, create a new folder, for example loadingscreen. The structure looks like this:
loadingscreen/fxmanifest.lualoadingscreen/index.htmlloadingscreen/style.cssloadingscreen/script.js(optional)loadingscreen/logo.png(optional)loadingscreen/music.mp3(optional)
Older servers sometimes use __resource.lua instead of fxmanifest.lua. Both work, but fxmanifest.lua is the current format.
The manifest: fxmanifest.lua
The manifest file tells FiveM which files belong to the resource. Create fxmanifest.lua with the following content:
fx_version 'cerulean'
game 'gta5'
loadscreen 'index.html'
files {
'index.html',
'style.css',
'script.js',
'logo.png',
'music.mp3'
}
The line loadscreen 'index.html' is essential: it tells FiveM this resource is a loading screen. List every file the page needs in the files block.
Creating a simple loading screen
Create the file index.html. Here is a basic example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png" alt="Server logo">
<h1>Welcome to our server</h1>
<p>Please wait while the server loads...</p>
<div class="progress-bar"><div class="progress-fill"></div></div>
</div>
<script src="script.js"></script>
</body>
</html>
Music and progress bar
Add background music with an audio element in your HTML:
<audio autoplay loop>
<source src="music.mp3" type="audio/mpeg">
</audio>
Keep the music file small (no more than 2 to 3 MB) so the loading screen itself loads quickly. For a progress bar, listen to the FiveM event that reports loading progress. Add the following to script.js:
const fill = document.querySelector('.progress-fill');
window.addEventListener('message', (e) => {
if (e.data.eventName === 'loadProgress') {
fill.style.width = e.data.loadFraction * 100 + '%';
}
});
Uploading to your server
Upload the complete loadingscreen folder to the resources folder of your FiveM server. You can do this through the file manager in the game panel or via SFTP. At HostValues, you will find the SFTP details in the Settings tab of your server.
Enabling in server.cfg
Open the file server.cfg and add the following line:
ensure loadingscreen
Place this line near the top, before other resources. Restart the server and your loading screen is live.
Showing server information
You can also display information such as the server name, IP address, rules or a Discord link on the loading screen. Simply add them as text or links in your HTML. This way players immediately know where they are and how to reach the team.
Tips for HostValues customers
- Use the file manager in the game panel for quick edits to HTML or CSS files.
- Upload larger files such as music or video through SFTP. Connection details are in the Settings tab.
- Test the loading screen by connecting to your own server. Changes take effect immediately after a restart.
Common issues and fixes
- Loading screen does not appear: check that the
ensureline exists inserver.cfgand that the folder name matches exactly. Also verify thatfxmanifest.luacontains the lineloadscreen 'index.html'. - Files do not load: every file the page uses must be listed in the
filesblock of the manifest. Do not forget images and fonts. - Music does not play: some browsers block autoplay. FiveM allows autoplay by default, but double-check that the path and filename are correct.
- White screen: open
index.htmllocally in your browser to check for HTML errors. A missing tag or a wrong path to the CSS file often causes a blank screen.
Stuck? Open a support ticket, our team is happy to help.