Want to make your FiveM server stand out? A custom loading screen is one of the easiest ways to create a unique first impression for your players. In this guide, you’ll learn how to add, install, and customize a loading screen for your FiveM server.
Whether you’re using a pre-made template or creating your own design, this step-by-step tutorial covers everything you need to know.
What Is a FiveM Loading Screen?
A FiveM loading screen is what players see while connecting to your server. It displays while the game loads resources, assets, and scripts. By default, FiveM shows a basic loading screen, but you can replace it with a custom design.
A good loading screen can include:
⦁ Your server name and logo
⦁ Server rules and information
⦁ Staff member list
⦁ Social media links
⦁ Background music
⦁ Custom images or videos
⦁ Loading progress bar
Where to Find FiveM Loading Screens
You can download free and paid loading screens from these sources:
Free Loading Screens
⦁ Cfx.re Forums (Releases Section) – Community-made free resources
⦁ GitHub – Search for “FiveM loading screen”
⦁ GTA5-Mods – Some FiveM-compatible loading screens
Premium Loading Screens
⦁ Tebex – FiveM asset marketplace
⦁ Various FiveM script stores
Online Loading Screen Makers
⦁ FiveM Loading Screen Maker – Create a loading screen without coding
Loading Screen Requirements
Before installing, make sure your loading screen folder contains these essential files:
⦁ fxmanifest.lua or __resource.lua – Resource manifest file (required)
⦁ index.html – Main loading screen display file (required)
⦁ style.css – Styling file (optional but common)
⦁ script.js – JavaScript file (optional)
⦁ config.lua or config.js – Configuration file (optional)
⦁ Image files – Background images, logos, etc.
⦁ music.mp3 – Background music (optional)
How to Install a FiveM Loading Screen
Follow these steps to install a custom loading screen on your FiveM server:
Step 1: Stop Your Server
Before making any changes, stop your FiveM server completely. This prevents errors and ensures files are properly loaded when you restart.
Step 2: Download a Loading Screen
- Find a loading screen you like from the sources mentioned above
- Download the ZIP file to your computer
- Extract the ZIP file to a folder
Step 3: Rename the Folder
- Rename the loading screen folder to something simple like loadingscreen
- Avoid spaces and special characters in the folder name
- Make sure the folder contains the index.html and fxmanifest.lua files
Step 4: Upload to Your Server
- Connect to your FiveM server using an FTP client (like FileZilla) or your hosting panel’s file manager
- Navigate to your server’s resources folder
- Upload the loadingscreen folder into the resources folder
Your folder structure should look like this:
resources/
└── loadingscreen/
├── fxmanifest.lua
├── index.html
├── style.css
└── (other files)
Step 5: Add to server.cfg
- Open your server.cfg file
- Add the following line to start the loading screen resource:
ensure loadingscreen
Or if you’re using the older format:
start loadingscreen
💡 Tip: Place this line near the top of your server.cfg to ensure the loading screen loads before other resources.
Step 6: Restart Your Server
- Save all changes
- Start your FiveM server
- Connect to the server to test the loading screen
- Check for any errors in the server console
If everything is set up correctly, you should see your custom loading screen when connecting to the server!
How to Customize Your Loading Screen
Most loading screens allow customization through config files or by editing HTML/CSS. Here’s how to make common changes:
Change Server Name
- Open config.js, config.lua, or index.html (depends on the loading screen)
- Find the server name variable or text
- Replace it with your server name
- Save the file
Change Background Image
- Add your image file to the loading screen folder
- Open style.css or config file
- Find the background image setting
- Update the file path to your new image
- Update the fxmanifest.lua to include your new image file
Change Background Music
- Replace the existing music file with your own (usually music.mp3)
- Keep the same filename, or update the reference in index.html or fxmanifest.lua
- Make sure the audio file is in MP3 format
Add Social Media Links
- Open the config file or index.html
- Find the social media section
- Add your Discord, Twitter, YouTube links
- Save and restart server
Add Server Rules
- Open the config file
- Find the rules section
- Add your server rules as text
- Save and test
Understanding fxmanifest.lua
The fxmanifest.lua file tells FiveM what files to load. Here’s a basic example:
fx_version 'cerulean'
game 'gta5'
loadscreen 'index.html'
files {
'index.html',
'style.css',
'script.js',
'background.jpg',
'music.mp3'
}
Important: If you add new files (images, music, etc.), you must add them to the files section in fxmanifest.lua, or they won’t load.
Troubleshooting Common Issues
Loading Screen Not Showing
⦁ Check that ensure loadingscreen is in your server.cfg
⦁ Verify the folder contains index.html and fxmanifest.lua
⦁ Make sure fxmanifest.lua has the loadscreen ‘index.html’ line
⦁ Check server console for errors
⦁ Restart the server completely
Images Not Loading
⦁ Ensure images are added to the files section in fxmanifest.lua
⦁ Check that file paths in HTML/CSS are correct
⦁ Use relative paths (e.g., ./images/background.jpg)
⦁ Avoid using external image hosts like Imgur or Discord (they don’t work)
Music Not Playing
⦁ Ensure the music file is in MP3 format
⦁ Check that the file is listed in fxmanifest.lua
⦁ Verify the file path in index.html is correct
⦁ Some browsers block autoplay – this is normal
Parsing Errors in F8 Console
⦁ Check fxmanifest.lua for syntax errors
⦁ Make sure all commas and brackets are correct
⦁ Use a code editor like VS Code to catch errors
Old Loading Screen Still Showing
⦁ Clear your FiveM cache (delete cache folders in %localappdata%/FiveM/FiveM.app/data)
⦁ Remove any old loading screen resources from server.cfg
⦁ Ensure only one loading screen resource is running
Creating Your Own Loading Screen
Want to create a completely custom loading screen? Here’s a basic template to get you started:
fxmanifest.lua
fx_version 'cerulean'
game 'gta5'
loadscreen 'index.html'
files {
'index.html',
'style.css'
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Welcome to My Server</h1>
<p>Loading... Please wait</p>
</div>
</body>
</html>
style.css
body {
margin: 0;
background: #1a1a2e;
color: white;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
From here, you can expand with more HTML, CSS, and JavaScript to create exactly what you want.
Frequently Asked Questions
Do I need coding knowledge to install a loading screen?
No, most pre-made loading screens are easy to install. You just upload the folder, add one line to server.cfg, and restart. Basic customization through config files also doesn’t require coding.
Can I use YouTube videos as background?
Some loading screens support YouTube video backgrounds. Check if your chosen loading screen has this feature, or look for one that specifically offers video support.
Why is my loading screen not updating after changes?
Clear your FiveM cache after making changes. Go to %localappdata%/FiveM/FiveM.app/data and delete the cache folders, then reconnect to the server.
Can I have multiple loading screens?
No, FiveM only supports one loading screen at a time. If you have multiple loading screen resources enabled, only one will work (usually the first one loaded).
Is there a file size limit for loading screens?
There’s no strict limit, but keep your loading screen lightweight. Large images and long music files increase loading time. Optimize images and use compressed audio for best performance.
Do players need to download the loading screen?
Yes, the loading screen files are downloaded when players connect. This is automatic and happens in the background. Keep file sizes small for faster loading.
Conclusion
Adding a custom loading screen to your FiveM server is a simple way to make a great first impression on players. Whether you use a pre-made template or create your own, the installation process only takes a few minutes.
To summarize the steps:
- Download a loading screen (or create your own)
- Upload the folder to your server’s resources directory
- Add ensure loadingscreen to server.cfg
- Customize using config files
- Restart your server and test
Now go make your server look amazing! Happy hosting!