Customization 8 min read September 2, 2024

How to Create a Custom Loading Screen for FiveM (2026)

Build a professional loading screen for your FiveM server using NUI. Learn the file structure, HTML/CSS design, music integration, and fxmanifest.lua configuration.

AloneDeveloper & Founder

First Impressions Matter

The loading screen is the first thing players see when they connect to your server. A generic black screen with plain text doesn't inspire confidence. A custom, branded loading screen sets the tone for your entire server — it tells players this is a polished, professional community.

In 2026, creating a custom loading screen is straightforward. This guide walks you through the entire process.

How FiveM Loading Screens Work

FiveM loading screens are NUI (New User Interface) based, which means they're standard web pages rendered inside the game. Your loading screen is just HTML, CSS, and optionally JavaScript — the same technologies used to build websites.

When a player connects, FiveM displays this web page while the server streams assets and initializes the player's session.

File Structure

A basic loading screen resource looks like this:

my-loading-screen/ ├── fxmanifest.lua ├── html/ │ ├── index.html │ ├── style.css │ ├── script.js (optional) │ ├── logo.png (your server logo) │ ├── background.jpg (background image)

│ └── music.mp3 (optional background music)

Setting Up fxmanifest.lua

fx_version 'cerulean' game 'gta5' author 'Your Name' description 'Custom Loading Screen' version '1.0.0' loadscreen 'html/index.html' files { 'html/index.html', 'html/style.css', 'html/script.js', 'html/logo.png', 'html/background.jpg', 'html/music.mp3'

}

The key directive is loadscreen 'html/index.html' — this tells FiveM to use your HTML file as the loading screen. All referenced files must be listed in the files {} block.

Building the HTML

A simple but effective loading screen:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <img src="logo.png" alt="Server Logo" class="logo">
        <h1>Welcome to My Server</h1>
        <p>Loading your experience...</p>
        <div class="spinner"></div>
    </div>
    <audio autoplay loop>
        <source src="music.mp3" type="audio/mpeg">
    </audio>
</body>
</html>

CSS Styling

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

.container {
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 40px;
    border-radius: 12px;
}

.logo {
    width: 200px;
    margin-bottom: 20px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

Adding Background Music

Include an audio element in your HTML with the autoplay and loop attributes. Keep the file size reasonable — 2-5 MB is ideal for a music loop. Use MP3 format for maximum compatibility.

Important: Some players find loading screen music annoying. Consider adding a mute button with a small JavaScript toggle, or keep the volume low.

Advanced Features

Loading Progress

FiveM provides JavaScript events you can listen for to show loading progress:

window.addEventListener('message', function(event) {
    if (event.data.eventName === 'loadProgress') {
        // event.data.loadFraction is a value between 0 and 1
        // Update a progress bar or percentage text
    }
});

This lets you build a real progress bar that shows actual loading progress.

Server Information

You can fetch server information using the loadscreen_url handler or display static info like:

Server rules
Discord invite link
Social media links
Staff team credits
Upcoming events or updates

Slideshow Backgrounds

Instead of a single background, rotate through multiple images using CSS animations or JavaScript:

setInterval(function() {
    // Cycle through background images
    document.body.style.backgroundImage = 
        'url(' + backgrounds[currentIndex] + ')';
    currentIndex = (currentIndex + 1) % backgrounds.length;
}, 5000);

Performance Tips

Optimize images — Use compressed JPG for backgrounds (aim for under 500 KB)
Keep audio small — Compress MP3 to 128 kbps or lower
Minimize JavaScript — The loading screen loads before the game, so heavy JS can slow the initial connection
Test on slow connections — If your loading screen assets are too large, players on slower connections will see a blank screen while they download

Installation

Place your loading screen folder in resources/
Add ensure my-loading-screen to server.cfg — this should be one of the first resources loaded
Restart the server
Connect to test — you should see your custom loading screen immediately

Brand Your Server from the Start

A professional loading screen sets expectations. Combined with a well-configured server running premium scripts like Jobs Creator, your players know they're joining a quality community from the moment they connect.

→ Browse Premium FiveM Scripts at Alone Studios

Ready to Transform Your Server?

FiveM Job Creator eliminates every problem discussed in this article. 0.00ms resmon. No-code configuration. ESX & QBCore native.

Get Job Creator on Tebex — €29.99