fivemloading-screenhtmlcssui

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

M2Dev

March 22, 2026

2 min read

116 views

Loading Screen in FiveM

Loading screen is the first impression of the server. If it is 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 ง่ายขึ้นมาก