fivemloading-screenhtmlcssui

Loading Screen in FiveM — Create a good first impression for the server.

M2Dev

March 22, 2026

2 min read

3 views

Loading Screen in FiveM

Loading screen is the first impression of a server. If it's beautiful and professional, players will feel that this server is trustworthy.

Loading Screen Resource structure

my-loading-screen/
├── fxmanifest.lua
├── html/
│ ├── index.html
│ ├── style.css
│ └── script.js
└── sounds/
    └── background.mp3

fxmanifest.lua

fx_version 'cerulean'
game 'gta5'

loadscreen 'html/index.html'
loadscreen_manual_shutdown 'yes' -- Control shutdown manually

files {
    'html/index.html',
    'html/style.css',
    'html/script.js',
    'sounds/*.mp3'
}

HTML Structure

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="loading-screen">
        <!-- Background -->
        <div class="bg-overlay"></div>
        
        <!-- Logo -->
        <div class="logo-container">
            <img src="logo.png" alt="Server Logo" class="logo">
            <h1 class="server-name">M2 Roleplay</h1>
        </div>
        
        <!-- Progress Bar -->
        <div class="progress-container">
            <div class="progress-bar">
                <div class="progress-fill" id="progress"></div>
            </div>
            <p class="status-text" id="status">Loading...</p>
        </div>
        
        <!-- Tips -->
        <div class="tips">
            <p id="tip">💡 Press F1 to open the main menu</p>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

CSS

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

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: 'Prompt', sans-serif;
    background: #0a0a0a;
    color: white;
}

#loading-screen {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
}

.bg-overlay {
    position: absolute;
    inset: 0;
    background: url('bg.jpg') center/cover;
    opacity: 0.3;
}

.logo { width: 150px; margin-bottom: 20px; }
.server-name { font-size: 2.5rem; color: #ffd700; text-shadow: 0 0 20px #ffd70066; }

.progress-container {
    position: absolute;
    bottom: 80px;
    width: 60%;
    text-align: center;
}

.progress-bar {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    height: 6px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ff8c00);
    width: 0%;
    transition: width 0.5s ease;
    border-radius: 10px;
}

.status-text { margin-top: 12px; font-size: 0.9rem; opacity: 0.7; }
.tips { position: absolute; bottom: 30px; font-size: 0.85rem; opacity: 0.6; }

JavaScript (get events from FiveM)

const tips = [
    '💡 Press F1 to open the main menu',
    '💡 Press F2 to view character status',
    '💡 Discord: discord.gg/yourserver',
    '💡 Do not use cheat or exploit'
];

let tipIndex = 0;

// Rotate tips every 5 seconds
setInterval(() => {
    tipIndex = (tipIndex + 1) % tips.length;
    document.getElementById('tip').textContent = tips[tipIndex];
}, 5000);

// Get progress from FiveM
window.addEventListener('message', function(event) {
    const data = event.data;
    
    if (data.eventName === 'loadProgress') {
        const pct = Math.round(data.loadFraction * 100);
        document.getElementById('progress').style.width = pct + '%';
document.getElementById('status').textContent = `Loading... ${pct}%`;
    }
    
    if (data.eventName === 'startConnect') {
        document.getElementById('status').textContent = 
            `Connecting ${data.hostName}...`;
    }
    
    if (data.eventName === 'onClientResourceStart') {
        document.getElementById('status').textContent = 
            `Load: ${data.resourceName}`;
    }
});

// Manual shutdown after load complete
window.addEventListener('message', function(event) {
    if (event.data.eventName === 'loadingScreenOff') {
        fetch('https://my-loading-screen/loadingScreenOff', {
            method: 'POST'
        });
    }
});

Manual Shutdown (Lua)

-- client.lua
AddEventHandler('onClientResourceStart', function(resourceName)
    if resourceName == GetCurrentResourceName() then
        -- Wait 2 seconds before closing the loading screen.
        Citizen.SetTimeout(2000, function()
            ShutdownLoadingScreen()
        end)
    end
end)

Summary

A good loading screen doesn't take long to create, but it gives a great first impression. Include a server identity, progress bar, and tips to keep players engaged from the first moment.

Breaking: GTA Online อัพเดท "Money Fronts" — FiveM Server Owners ต้องทำอะไร?

Rockstar ปล่อย GTA Online อัพเดท Money Fronts มีผลกระทบต่อ FiveM servers บางส่วน นี่คือสิ่งที่ต้องทำทันทีหลังอัพเดท

Community Spotlight: Script และ Projects ที่น่าสนใจจาก FiveM Community

รวม scripts, tools และ projects ที่โดดเด่นจาก FiveM community ในช่วงที่ผ่านมา ตั้งแต่ free resources ถึง open-source projects

txAdmin อัพเดทใหม่ — Dashboard, Diagnostics และ Ban System ที่ดีขึ้น

txAdmin ซึ่งตอนนี้เป็นส่วนหนึ่งของ Cfx.re อย่างเป็นทางการ ได้รับการอัพเดทครั้งใหญ่ มี features ใหม่ที่ทำให้ Server Management ง่ายขึ้นมาก