Skip to main content

​
Establishing a Professional First Impression

The loading screen represents the initial interaction a player has with your community. By replacing the default FiveM loader with a custom NUI (Native User Interface) screen, you can effectively communicate your server’s rules, showcase high-fidelity community artwork, and establish a specific atmosphere through immersive background music. This guide ensures your loading screen is correctly architected for performance and cross-resolution compatibility.

Difficulty

Intermediate

Time

10 Minutes

​
Step 1: Resource Foundation

Create a dedicated directory named freak_loadscreen within your server’s /resources/ folder. A professional loading screen requires the following technical components:
  • fxmanifest.lua: The authoritative registry that instructs the engine to load the UI.
  • index.html: The structural visual layout of your screen.
  • style.css: The design layer responsible for animations, typography, and responsive positioning.
  • music.mp3: Your atmospheric background audio track.

​
Step 2: Defining the Technical Manifest

Your fxmanifest.lua must explicitly categorize the resource as a loading screen to trigger the correct initialization sequence during the connection handshake. 
fx_version 'cerulean'
games { 'gta5' }

loadscreen 'index.html'

files {
    'index.html',
    'style.css',
    'music.mp3',
    'images/*.png'
}

​
Step 3: Architecting the UI (HTML)

The index.html functions as a standard web page rendered within the FiveM internal browser. You can use modern CSS animations to create a dynamic and engaging environment. 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <h1>Welcome to FREAKHOSTING RP</h1>
        <p>Press ESC for community rules | Establishing connection...</p>
    </div>
    
    <audio id="bgm" src="music.mp3" autoplay loop></audio>
    <script>
        // Establishing subtle volume to maintain user comfort
        document.getElementById("bgm").volume = 0.3; 
    </script>
</body>
</html>

​
Strategic Design Recommendations

High-decibel, un-skippable audio can negatively impact the user experience. Always set your script’s default volume to 0.3 (30%) or lower. We highly recommend including a visible “Mute” button in your UI to allow players to prioritize their own communication or music while waiting to join.
Ensure your background imagery is optimized for various aspect ratios (16:9, 21:9, and 4:3). using high-resolution .jpg or .webp files with a balance between quality and file size ensures that your loading screen initializes rapidly for players with slower internet connections.

​
Activating the Resource

Once your files are uploaded, add ensure freak_loadscreen to your server.cfg. The new visuals will take effect for every new player joining the server immediately following a server restart.

​
Need Extra Help?

If you encounter any issues, our support team is ready to assist:

​
Save on Your Hosting

Ready to get a new server? Use code KB20 at checkout for 20% off your first month!
Last Updated: January 2026 | FiveM: Branding active.