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 fully replace it with a custom design using HTML, CSS and JavaScript. Think of your server logo, music, a progress bar and server information.
What Is a FiveM Loading Screen?
A loading screen is a resource that FiveM displays while the player connects and downloads all server files. Technically, it is a regular web page rendered in an embedded browser. You can include anything that fits in a normal website: images, animations, video, audio and interactive elements.
File Structure
In the resources directory of 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 the file 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 that this is a loading screen. List all files that the page needs in the files section.
Creating a Simple Loading Screen
Create the file index.html. Below 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, the server is loading...</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 (2 to 3 MB maximum) so the loading screen itself loads quickly. For a progress bar, listen in JavaScript for 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 the Server
Upload the complete loadingscreen folder to the resources directory of your FiveM server. You can do this via the file manager in the game panel or via SFTP. At HostValues, you will find the SFTP credentials in the Settings tab of your server.
Activating in server.cfg
Open the file server.cfg and add the following line:
ensure loadingscreen
Place this line preferably at the top, before other resources. Restart the server and the loading screen is active.
Displaying Server Information
You can also display information on the loading screen such as the server name, IP address, rules or a Discord link. Simply place these as text or links in your HTML. This way players immediately know where they are and how to contact the team.
Tips for HostValues Customers
- Use the file manager in the game panel for small changes to the HTML or CSS.
- Upload larger files such as music or video via SFTP. The connection details are in the Settings tab.
- Test the loading screen by connecting to your server yourself. Changes are visible immediately after a restart.
Common Issues
- Loading screen does not appear: check that the
ensureline is inserver.cfgand that the folder name matches exactly. Also verify thatfxmanifest.luacontains the lineloadscreen 'index.html'. - Files not loading: all files used by the page must be listed in the
filessection of the manifest. Do not forget images and fonts. - Music not playing: some browsers block autoplay. FiveM allows autoplay by default, but 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 an incorrect path to the CSS often causes a blank screen.
Need help? Open a support ticket, our team is happy to assist.
Tip: at HostValues you can rent a FiveM server and be online within minutes.