How to make a FiveM loading screen

A FiveM loading screen is a small web page (HTML, CSS and JavaScript) that the game shows while players join. Here is how to make one, set up its manifest and hand over to the game without the default GTA screen flashing in between.

1. 1Design the page

   Pick a background (pictures, a video or a YouTube link), your logo, music, tips and a progress bar. The Loading Screen Builder lets you place every element on a live preview and downloads the finished resource.

2. 2Set up the fxmanifest

   The manifest points to the page with loadscreen 'index.html' and lists every file the page uses (HTML, CSS, scripts, images, music) in files { } — anything not listed won\'t load. Add loadscreen_manual_shutdown 'yes' so your resource decides when the screen closes.

3. 3Hand over to the game

   With manual shutdown, a client script calls ShutdownLoadingScreenNui() once the player has spawned (or your framework\'s character select has opened). Without it, the loading screen closes early and the default GTA loading screen shows before spawn.

4. 4Keep it light

   Players see it on every join, so compress images and video, keep music short, and remember the game\'s browser is older than desktop Chrome — avoid very new CSS features.

5. 5Install and test

   Put the folder in resources, ensure it in server.cfg, and make sure only one loading-screen resource is running. Join from a fresh client to check the handover.

Make the rest of the city match with the free HUD Creator and Blip Creator.