How to Make a Custom FiveM Loading Screen

The loading screen is the first thing players see when they connect to your FiveM server — a great one sets the tone for your community. This guide covers how to make a custom loading screen for FiveM.

How loading screens work

A FiveM loading screen is just a small web page (HTML, CSS, JavaScript) bundled in a resource. While the server streams assets to the connecting player, FiveM displays your page instead of the default screen. You can show your server name, rules, music, social links, and a live connection progress bar.

How to add one

1. Create a resource folder (e.g. loadingscreen) with your index.html and assets (CSS, images, music).
2. In its fxmanifest.lua, declare the loading screen page and files:

   fx_version 'cerulean'
   games { 'gta5' }
   loadscreen 'index.html'
   files {
     'index.html',
     'style.css',
     'background.jpg',
   }

3. ensure the resource in your server.cfg.

Add the FiveM features

• Background music — include an audio file and play it; FiveM provides events to control loading-screen audio so it can fade when the player spawns.
• Progress bar — FiveM exposes loading progress events your JavaScript can hook to show a real connection bar.
• Server info — rules, Discord link, staff, and rotating tips keep players engaged while they load.

Tips

• Keep image and video assets optimised — a heavy loading screen ironically slows the load.
• Test it by reconnecting; the loading screen only shows during the connection phase.
• Many community loading-screen templates exist as a starting point — customise one to your brand.

Frequently asked questions

How do I make a custom FiveM loading screen?

Build a small HTML/CSS/JS page, put it in a resource, declare it with loadscreen 'index.html' in the fxmanifest, list its files, and ensure the resource in server.cfg.

Can I add music to my FiveM loading screen?

Yes — include an audio file and use FiveM’s loading-screen audio events so it plays during connection and stops when the player spawns.

Why isn’t my loading screen showing?

Check the loadscreen entry and that all files are listed in the fxmanifest and the resource is ensured. It only displays during the connection phase.