The default FiveM loading screen is functional but bland. A custom loading screen gives your server an immediate professional look. Players see it first when connecting, making it your chance to set the tone. In this article, we show you how to build and install one.
How does a FiveM loading screen work?
A loading screen is a simple web page (HTML, CSS, JavaScript) that FiveM displays while server resources load. It is a resource on your server with a special type: loadscreen. FiveM injects the page into a built-in browser.
Creating a loading screen
Create a new folder in your resources/ directory, for example [loadscreen]/my-loadscreen. You need two files:
fxmanifest.lua:
fx_version 'cerulean'
game 'gta5'
loadscreen 'index.html'
files {
'index.html',
'style.css',
'logo.png'
}
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png" alt="Server Logo">
<h1>My RP Server</h1>
<p>Loading...</p>
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
</div>
<script>
window.addEventListener('message', function(e) {
if (e.data.eventName === 'loadProgress') {
document.getElementById('progress').style.width =
Math.floor(e.data.loadFraction * 100) + '%';
}
});
</script>
</body>
</html>
Styling
Use CSS to design your loading screen. Popular elements:
- A background image or video of the city
- Your server logo centered
- A progress bar showing the loading status
- Server rules or tips as scrolling text
- Social media links (Discord, website)
Keep the file size small. Large images slow down the loading screen itself. Use WebP for images and compress videos.
Installing on your server
- Upload the folder to
resources/[loadscreen]/. - In
server.cfg, add:ensure my-loadscreen. - Restart the server.
The loading screen appears automatically when a player connects.
Adding music
Add an audio file to your resource and play it in JavaScript:
var audio = new Audio('music.mp3');
audio.volume = 0.3;
audio.loop = true;
audio.play();
Keep the volume low (0.2 to 0.4) and choose calm background music. Loud music on connect drives players away.
Ready-made loading screens
Do not want to build one yourself? There are free and paid loading screens available:
- CFX Forum releases: free community loading screens.
- Tebex: paid premium loading screens with advanced features.
Customize the colors, logo, and text for your server.
Can I use a video as background?
Yes. Use an HTML5 <video> element with autoplay, muted, and loop. Keep the video under 10 MB and use MP4 with H.264 encoding for the best compatibility.
Why do I not see my loading screen?
Check: is the resource in server.cfg with ensure? Is the path in fxmanifest.lua correct? Is loadscreen spelled correctly? Check the F8 console for error messages.
Can I show the loading progress?
Yes. FiveM sends loadProgress events to the page. Use the JavaScript example above to fill a progress bar based on the actual loading status.
Set up your custom loading screen on a FiveM server at HostValues with full file access.
