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 improves your server from hobbyist to professional. It's the visual layer that players interact with constantly - invest time in getting it right.

Custom loading screens are served straight off disk, so fast storage shortens the wait before players spawn. Every plan on our FiveM hosting page uses NVMe storage.