How to Install a Custom Loading Screen on FiveM

First impressions matter. When a new player joins your FiveM server, the very first thing they see is your loading screen. A default, boring loading screen might cause them to disconnect before they even spawn in. In this guide, we'll show you exactly how to install a beautiful, custom loading screen on your FiveM server.

Step 1: Download Your Loading Screen Resource

If you haven't already created one, you can easily build a stunning, fully-customized loading screen using the ViceForge Loading Screen Builder. Once you've designed your layout, added your music, and customized your colors, click the export button to download your compiled resource as a ZIP file.

Extract this ZIP file. You should see a folder containing at least two things: an index.html file (along with other assets like CSS and JS) and an fxmanifest.lua file.

my_loadscreen/
              ├── fxmanifest.lua
              ├── index.html
              ├── style.css
              ├── script.js
              └── assets/
              ├── background.mp4
                └── logo.png

Step 2: Upload to Your Server's Resources Folder

Connect to your FiveM server via FTP (using FileZilla or WinSCP) or through your host's web panel. Navigate to your resources folder.

Drag and drop the entire my_loadscreen folder into your resources folder. Make sure you don't accidentally put it inside another resource folder.

Step 3: Ensure Your fxmanifest.lua is Configured correctly

If you used ViceForge, this step is automatically done for you! But if you are doing this manually, you must have an fxmanifest.lua that tells FiveM this is a loading screen. It should look like this:

fx_version 'cerulean'
              game 'common'

              author 'ViceForge'
              description 'Custom Loading Screen'

              loadscreen 'index.html'
              loadscreen_cursor 'yes'

              files {
                  'index.html',
                  'style.css',
                  'script.js',
                  'assets/*'
              }

Step 4: Start the Resource in server.cfg

The final step is to tell your server to start this resource when it boots up. Open your server.cfg file, located in your main server directory.

Scroll down to where your other resources are being started (you'll see lines starting with ensure or start), and add the following line:

Step 5: Restart Your Server

Save your server.cfg file, and restart your FiveM server. Connect to your server, and you should now see your beautiful new loading screen!

Troubleshooting: If the screen is black, double-check your fxmanifest.lua files array to ensure all assets are being loaded properly. Press F8 in the FiveM client to see if there are any UI errors.