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.
BEFORE YOU START
Build it
Create the resource
The folder structure is ready.
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.
<!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>
* { 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; }