How to Create a Custom FiveM Loading Screen
Step-by-step guide to building and installing a custom FiveM loading screen: resource structure, fxmanifest, 1920x1080 background, music, NUI basics, and manual shutdown.
On this page
The loading screen is the first thing a new player sees when they join your server. A generic black screen with a spinning circle signals a low-effort server; a polished, branded loading screen with a cinematic background, smooth animations, and background music tells players they are joining something worth their time. Building one is more accessible than most server owners think — it is just a web page that FiveM renders while the world loads.
This guide covers the complete process: folder structure, the fxmanifest.lua directives, background image specifications, adding music, displaying server information, and using the manual shutdown hook so the screen closes at exactly the right moment.
Resource Folder Structure
A loading screen is a standard FiveM resource. Create a folder inside your server's resources directory. A clean structure looks like this:
- my-loading-screen/ — root resource folder
- my-loading-screen/fxmanifest.lua — resource manifest
- my-loading-screen/index.html — the NUI entry point
- my-loading-screen/style.css — your stylesheet
- my-loading-screen/script.js — your JavaScript
- my-loading-screen/bg.jpg — 1920x1080 background image
- my-loading-screen/music.mp3 — optional background audio
- my-loading-screen/logo.png — your server logo (PNG with transparency)
fxmanifest.lua: The Two Critical Directives
The fxmanifest.lua file for a loading screen resource is simpler than most FiveM resources. The two directives that matter are loadscreen, which tells FiveM which HTML file to render, and loadscreen_manual_shutdown, which gives you control over when the screen closes. All other files (CSS, JS, images, audio) are automatically accessible from the NUI page as relative paths — you do not need to list them under files unless you are referencing them from Lua.
fx_version 'cerulean'
game 'gta5'
author 'Your Name'
description 'Custom loading screen'
version '1.0.0'
loadscreen 'index.html'
loadscreen_manual_shutdown 'yes'
files {
'index.html',
'style.css',
'script.js',
'bg.jpg',
'music.mp3',
'logo.png'
}Manual Shutdown Explained
When loadscreen_manual_shutdown is set to 'yes', FiveM will not close the loading screen automatically. Your Lua code must send a NUI message or call ShutdownLoadingScreen() to dismiss it. This prevents the screen from closing before your framework, inventory, or UI resources have finished loading.
Background Image: 1920x1080 at Full HD
The background image for your loading screen should be 1920x1080 pixels — Full HD, 16:9 aspect ratio. This is the standard display resolution for the majority of PC gamers and ensures your image fills the screen without any scaling or letterboxing on most monitors. Use JPG format for photographic backgrounds to keep the file size manageable; use PNG if your background contains sharp UI elements, text, or a transparent overlay layer.
| Asset | Recommended Size | Format | Notes |
|---|---|---|---|
| Background image | 1920 x 1080 px | JPG or PNG | Full HD, 16:9. JPG preferred for photos to reduce load time. |
| Server logo | Variable (e.g. 400x200) | PNG | Use PNG with transparency to overlay cleanly on the background. |
| Background music | N/A (audio) | MP3 or OGG | Both formats work in FiveM's CEF browser. |
| Progress bar or spinner | CSS-driven | CSS/SVG | No separate image needed; animate with CSS for best performance. |
| Server info card background | Variable | PNG (semi-transparent) | Or use a CSS rgba() background — avoid backdrop-filter in CEF. |
Building the HTML: Minimal Boilerplate
The index.html file is a standard web page. FiveM's CEF engine supports modern HTML5, CSS3, and JavaScript. Keep the structure simple: a full-screen background image, your logo, a loading status text element, and optionally a progress indicator. The NUI message system lets your Lua scripts send updates to the page in real time.
<!-- index.html - minimal loading screen structure -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loading</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="background"></div>
<div id="content">
<img src="logo.png" id="logo" alt="Server Logo">
<div id="status">Connecting to server...</div>
<div id="progress-bar"><div id="progress-fill"></div></div>
</div>
<audio id="music" src="music.mp3" autoplay loop></audio>
<script src="script.js"></script>
</body>
</html>Adding Background Music
Background music is a single HTML5 audio element. Bundle your MP3 or OGG file inside the resource folder and reference it with a relative path. The autoplay attribute starts playback immediately, and loop keeps it running for the duration of loading. CEF in FiveM supports autoplay without the user gesture requirement that desktop browsers enforce, so your music will start without any workaround.
- Use MP3 for widest compatibility and reasonable file size.
- Keep your audio file under 5 MB — longer tracks are fine but compress them appropriately.
- Consider fading the audio out when the loading screen closes using a CSS transition triggered by JavaScript.
- Do not use backdrop-filter CSS in your loading screen — FiveM's CEF version does not support it. Use solid semi-transparent rgba() backgrounds instead.
Displaying Server Information via NUI Messages
You can pass real-time data to the loading screen from Lua using NUI messages. This lets you display the current player count, server name, or custom loading steps. Listen for these messages in your JavaScript using window.addEventListener('message', ...).
-- script.js — listen for NUI messages
window.addEventListener('message', function(event) {
var data = event.data;
if (data.action === 'setStatus') {
document.getElementById('status').textContent = data.text;
}
if (data.action === 'shutdown') {
// fade out and call shutdown
document.body.style.opacity = '0';
setTimeout(function() {
fetch('https://my-loading-screen/shutdown', {
method: 'POST',
body: JSON.stringify({})
});
}, 500);
}
});Manual Shutdown: Controlling When the Screen Closes
With loadscreen_manual_shutdown 'yes' active, the loading screen stays open until you explicitly close it. In your Lua code — typically in a client-side script that listens for your framework's ready event — you call ShutdownLoadingScreen() or send a NUI callback to trigger the shutdown sequence.
-- client.lua — shut down loading screen after framework is ready
AddEventHandler('onClientResourceStart', function(resourceName)
if resourceName == GetCurrentResourceName() then
-- Wait for ESX or QBCore to be ready
while not ESX do
Wait(100)
end
-- Optionally send a status update first
SendNUIMessage({ action = 'setStatus', text = 'World loaded. Welcome!' })
Wait(1500)
-- Close the loading screen
ShutdownLoadingScreen()
end
end)Adding the Resource to server.cfg
The loading screen resource must be listed in your server.cfg with the ensure directive. Place it near the top — before your framework and gameplay resources — so it starts immediately when a player connects.
# server.cfg — ensure loading screen early
ensure my-loading-screen
# framework and other resources below
ensure es_extended
ensure ox_inventory
ensure ox_libCommon Loading Screen Mistakes to Avoid
- Using a background image smaller than 1920x1080 — it will upscale and appear blurry on full-screen monitors.
- Using backdrop-filter in CSS — this property is not supported in FiveM's CEF browser and will break your layout.
- Forgetting to list files in fxmanifest — if assets are missing from the files array, they may not stream correctly.
- Not testing with a clean server restart — the loading screen only fires properly on a fresh connection, not a resource restart mid-session.
- Relying on external CDN URLs for critical images — if the CDN is slow or unreachable, players will see a broken loading screen. Bundle assets inside the resource.
- Calling ShutdownLoadingScreen() too early — if you close the screen before the world is ready, players will see a black screen or incomplete game state.
Professional Loading Screens from CRM Development
If you want a fully custom, animated loading screen designed to match your server's branding — complete with dynamic server info, smooth transitions, background music, and correct 1920x1080 assets — CRM Development builds loading screens as part of their server pack offerings and as standalone commissions. Every resource is delivered clean, optimized, and ready to drop into your server.
Frequently asked questions
What directive do I use in fxmanifest.lua for a loading screen?+
Use the loadscreen directive followed by the entry HTML file name, for example: loadscreen 'index.html'. Optionally add loadscreen_manual_shutdown 'yes' if you want to control exactly when the loading screen closes via a Lua trigger.
What size should my loading screen background image be?+
The background image should be 1920x1080 pixels (Full HD, 16:9). This fills the screen without scaling artifacts on the most common monitor resolutions.
Can I add background music to a FiveM loading screen?+
Yes. The loading screen is an NUI HTML page running in FiveM's CEF browser, so you can use a standard HTML5 <audio> element with an MP3 or OGG file bundled inside your resource.
How do I stop the loading screen from closing too early?+
Add loadscreen_manual_shutdown 'yes' to your fxmanifest.lua, then trigger the NUI message {action: 'shutdown'} from your Lua code once your resource dependencies have loaded. This prevents the screen from closing before the player is ready.
Does the loading screen resource need to be in server.cfg?+
Yes. Your loading screen resource must be listed with ensure (or start) in server.cfg, and it should be ensured before your other gameplay resources so it fires first during connection.