Creating Custom FiveM Loading Screens and UI Elements

Your loading screen is the first thing players see. A professional, custom loading screen sets expectations for your server's quality before gameplay even starts.

Loading Screen Basics

FiveM loading screens are HTML pages. They support:

• HTML5
• CSS3 (animations, transitions, gradients)
• JavaScript
• Audio/video elements
• Websocket connections for real-time data

File Structure

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

fxmanifest.lua

fx_version 'cerulean'
game 'gta5'

loadscreen 'html/index.html'

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

Design Principles

Keep It Lightweight

Loading screens load before the game. Players with slower connections will wait for your assets:

• Compress images (WebP format, 80% quality)
• Total loading screen assets: under 5MB
• Background video if used: under 10MB, compressed

Show Progress

Players want to know the server is loading, not frozen:

const handlers = {
    startInitFunctionOrder(data) {
        document.getElementById('status').textContent = `Loading: ${data.type}`;
    },
    initFunctionInvoking(data) {
        document.getElementById('detail').textContent = data.name;
    },
    startDataFileEntries(data) {
        document.getElementById('progress').textContent = 
            `Loading game data: ${data.count} entries`;
    }
};

window.addEventListener('message', function(e) {
    if (handlers[e.data.eventName]) {
        handlers[e.data.eventName](e.data);
    }
});

Display Server Info

Show useful information while loading:

• Server name and logo
• Server rules (brief summary)
• Staff/admin credits
• Discord link
• Current player count (via API)

CSS Animations

Smooth animations make the wait feel shorter:

.logo {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
}

.loading-dots::after {
    content: '';
    animation: dots 1.5s steps(3, end) infinite;
}

@keyframes dots {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}

Music

Background music during loading:

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

<script>
    const music = document.getElementById('bgMusic');
    music.volume = 0.3;
    music.play().catch(() => {
        // Autoplay blocked - add a "click to enable music" button
    });
</script>

Keep music volume low (0.2-0.3). Players will complain about loud loading screens.

NUI (In-Game UI)

Beyond loading screens, custom UI enhances gameplay:

HUD Elements

-- Display custom HUD
RegisterNUICallback('getPlayerData', function(data, cb)
    local playerData = QBCore.Functions.GetPlayerData()
    cb({
        health = GetEntityHealth(PlayerPedId()),
        armor = GetPedArmour(PlayerPedId()),
        money = playerData.money,
        job = playerData.job.label
    })
end)

Interactive Menus

Modern FiveM servers use NUI for menus instead of native GTA menus:

• React or Vue frameworks for complex interfaces
• Tailwind CSS for quick styling
• Smooth animations and transitions

Performance

NUI runs in Chromium Embedded Framework (CEF). Performance tips:

• Minimize DOM updates (use virtual DOM frameworks)
• Don't render when hidden (display: none pauses rendering)
• Avoid heavy JavaScript computation in NUI
• Use CSS animations instead of JavaScript animations

A polished UI elevates your server from hobbyist to professional. It's the visual layer that players interact with constantly - invest time in getting it right.