How to Create a Custom Loading Screen in FiveM

Create a clean, professional loading screen for your FiveM server using HTML, CSS, and music.

Overview

A custom loading screen replaces the default FiveM screen when players join your server.

It allows you to:

Show your branding (EUGAMEHOST)
Display useful text (rules, connection status)
Play background music
Make your server look more professional

Difficulty

Intermediate

Time

~10 minutes

Step 1: Create the Resource

Go to your /resources/ folder and create a new folder:

/resources/[scripts]/eugamehost_loadscreen/

Inside it, create this structure:

eugamehost_loadscreen/
├── fxmanifest.lua
├── index.html
├── style.css
├── music.mp3
└── images/
    └── background.png

Step 2: Create fxmanifest.lua

Create a file named fxmanifest.lua and add:

fx_version 'cerulean'
game 'gta5'

loadscreen 'index.html'

files {
    'index.html',
    'style.css',
    'music.mp3',
    'images/*'
}

Step 3: Create index.html

Create a file named index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EUGAMEHOST</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
    <h1>EUGAMEHOST RP</h1>
    <p>Loading server...</p>
    <p style="font-size:14px; opacity:0.7;">Press ESC for menu</p>
</div>

<audio id="music" autoplay loop>
    <source src="music.mp3" type="audio/mpeg">
</audio>

<script>
    document.getElementById("music").volume = 0.3;
</script>

</body>
</html>

Step 4: Create style.css

Create a file named style.css:

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    height: 100vh;
    background: url('images/background.png') center/cover no-repeat;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.container {
    background: rgba(0,0,0,0.6);
    padding: 40px;
    border-radius: 10px;
}

h1 {
    font-size: 48px;
    margin-bottom: 10px;
}

p {
    font-size: 20px;
}

Step 5: Add Your Files

Add your music file as:

music.mp3

Add your background image as:

/images/background.png

If you use a different file name, update it in style.css.

Step 6: Enable the Loading Screen

Open your server.cfg and add:

ensure eugamehost_loadscreen

Done

Restart your server.

Players will now see your custom loading screen when joining.

Common Mistakes

Not adding the resource to server.cfg
Wrong file names or folder structure
Missing fxmanifest.lua
Incorrect image or music paths

Reliable FiveM Hosting Built for Serious Communities
From just £4.20/month, get high-performance hosting backed by 30Tbps Anycast DDoS protection for maximum uptime and security.

Get Started in Seconds →

Fivem Server Hosting