> ## Documentation Index
> Fetch the complete documentation index at: https://help.freakhosting.com/llms.txt
> Use this file to discover all available pages before exploring further.
# How to Create a Custom Loading Screen in FiveM
> Establish a professional first impression for your players. Learn how to architect a custom NUI loading screen using HTML, CSS, and interactive audio.
## 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.
Intermediate
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.
```lua theme={null}
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.
```html theme={null}
Welcome to FREAKHOSTING RP
Press ESC for community rules | Establishing connection...
```
***
## 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:
* **Live Chat:** Quick assistance via our website.
* **Support Ticket:** [Open a Ticket](https://freakhosting.com/clientarea/submitticket.php)
* **Discord:** [Join our Community](https://discord.gg/freakhosting)
* **Email:** [support@freakhosting.com](mailto:support@freakhosting.com)
### 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.