Custom loading screen with music

The loading screen is the first thing players see. Five seconds of a branded, professional loading screen builds more trust than a hundred forum posts. This lesson builds one from scratch - logo, background, music, rotating tips - and explains every line.

You'll build: A branded loading screen with your server logo, background image, music track, and loading tips that display while players connect.
Time: ~20 minutes
You need: A local FiveM server, basic HTML/CSS knowledge, and an audio file (.ogg format).
You'll learn: The loading screen architecture, HTML/CSS for the overlay, playing background music, cycling tips, and the correct fxmanifest setup.

BEFORE YOU START

Build it

Create the resource

The folder structure is ready.

code

resources/my_loadingscreen/
fxmanifest.lua
index.html
style.css
script.js
assets/
logo.png
background.jpg
music.ogg

Build the HTML page

The loading screen displays your brand.

code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="overlay">
    <img src="assets/logo.png" alt="Server Logo" class="logo">
    <h1>My FiveM Server</h1>
    <div class="loading-bar">
        <div class="progress" id="progressBar"></div>
    </div>
    <p id="tip">Loading amazing experiences...</p>
</div>
<audio id="bgMusic" loop>
    <source src="assets/music.ogg" type="audio/ogg">
</audio>
<script src="script.js"></script>
</body>
</html>

code

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: system-ui, sans-serif;
background: url('assets/background.jpg') center/cover no-repeat;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.overlay {
background: rgba(0,0,0,0.7);
padding: 48px;
border-radius: 16px;
text-align: center;
max-width: 500px;
}
.logo { width: 120px; margin-bottom: 16px; }
h1 { font-size: 28px; margin-bottom: 24px; }
.loading-bar {
background: rgba(255,255,255,0.2);
border-radius: 4px;
height: 6px;
margin: 24px 0;
overflow: hidden;
}
.progress {
background: #0fb6c4;
height: 100%;
width: 0%;
transition: width 0.3s;
}
#tip { font-size: 14px; opacity: 0.7; margin-top: 16px; }

code

// Rotating tips
const tips = [
'Welcome to the best FiveM experience!',
'Join our Discord: discord.gg/yourserver',
'Need help? Type /help in chat.',
'Check out our custom vehicles and jobs!',
];
let tipIndex = 0;
setInterval(() => {
tipIndex = (tipIndex + 1) % tips.length;
document.getElementById('tip').textContent = tips[tipIndex];
}, 4000);

// Start music
window.addEventListener('load', () => {
document.getElementById('bgMusic').play().catch(() => {});
});

// Loading progress
let progress = 0;
const progressBar = document.getElementById('progressBar');
const interval = setInterval(() => {
progress += Math.random() * 15;
if (progress > 100) progress = 100;
progressBar.style.width = progress + '%';
if (progress >= 100) clearInterval(interval);
}, 300);

Write fxmanifest and test

The loading screen appears when players connect.

code

fx_version 'cerulean'
game 'gta5'

loadscreen 'index.html'

files {
'index.html',
'style.css',
'script.js',
'assets/logo.png',
'assets/background.jpg',
'assets/music.ogg',
}

loadscreen is a dedicated manifest key - it tells FiveM to show this page during the loading phase and hide it automatically when the player spawns.

Ensure and reconnect. Your branded screen appears.

Keep reading the full lesson

Still ahead in this lesson

Common failures