A polished, fully configurable FiveM loading screen. Drop it in, edit one file, and go. Every section can be customized — or deleted — without breaking anything. Works standalone and alongside QBCore, ESX and Qbox.
- Real load progress — the bar and percentage reflect the game's actual loading progress, with live status text (what's downloading / loading).
- Themeable — one main + secondary color drives the entire UI.
- Image or video background with an optional overlay, and a safe solid-color fallback.
- Background music player — config-driven playlist, autoplay, volume, next/ previous, seek.
- Team, Rules, Updates panels — rich, searchable, all from config.
- On-screen keybinds keyboard — highlights your server's binds with hover tooltips (see the AI helper for setup).
- Live server info — player count + hostname pushed from the server (auto-detects your framework), with static fallback.
- Social links open in the player's real browser (Chrome/Edge/…), not the in-game frame.
- Bulletproof — every section is optional and fails safe. A missing image, a typo, or a deleted array will never blank the screen.
- Resilient assets — images fall back gracefully; display fonts are served
over https (FiveM's CEF doesn't render local
nui://fonts reliably).
| Keybinds keyboard | Rules panel | Team panel |
|---|---|---|
 |
 |
 |
- Copy this folder into your server's
resources/directory (rename it tokivo-loading-screenif you like). - Add it to your
server.cfg:ensure kivo-loading-screen
- Drop your images into the
images/folder and editconfig.js. - Restart the server. That's it — no build step required.
Only one loading screen resource can be active at a time. Make sure any other loading screen (including the default) is not
ensured.
Everything lives in config.js at the root of this resource. It's plain,
heavily-commented JavaScript — change the values, save, restart the resource.
You never need to touch the compiled UI in html/.
Highlights (see config.js for the full, commented list):
| Section | What it controls | To hide it |
|---|---|---|
theme |
Main + secondary accent colors | — |
background |
Image / video / color + overlay + blur | type: "color" |
logo |
Text wordmark or image, top-left | enabled: false |
progress |
Loading bar title / subtitle / live status | enabled: false |
music |
Playlist + autoplay/volume/loop/shuffle | enabled: false or tracks: [] |
nav |
Which top buttons show | toggle each |
links |
Social buttons (top-right) | links: [] |
server |
Name, location, fallback player counts | — |
staff |
Team members (Team panel) | staff: [] |
rules |
Rule categories (Rules panel) | rules: [] |
updates |
Changelog entries (Updates panel) | updates: [] |
keybinds |
On-screen keyboard highlights | enabled: false or binds: [] |
Any section you empty ([]) or disable simply disappears — its nav button and
panel vanish and the rest of the screen keeps working.
Put your images in the images/ folder at the root of the resource and
reference them from config.js as e.g. "images/background.png". No digging
through the compiled html/ bundle.
images/
├── background.png # main background
├── backdrop.png # optional overlay (vignette/gradient)
├── logo.png # optional image logo
├── music-cover.png # music artwork
├── staff/ # staff photos
└── events/
External https:// URLs work too. If an image is missing, the UI falls back
gracefully (solid color / initial letter / icon).
Set your playlist in config.music.tracks. Each track needs a url, which can
be:
- a local file: create a
music/folder in the resource, drop your.mp3in, and reference it as"music/song.mp3"(it's already declared infxmanifest.lua), or - a direct
https://link to an audio file / stream.
FiveM's browser can't play a YouTube watch page — use a real audio file URL or a local mp3.
The keybinds panel shows a full on-screen keyboard and lights up the keys your
server binds, with a tooltip label on hover. Configuring it by hand is fiddly,
so config.js includes a ready-to-paste System Prompt + User Prompt you can
hand to any AI assistant (ChatGPT, Claude, …) to generate the binds array for
you. Look for the big KEYBINDS comment block in config.js.
The format is simply:
binds: [
{ key: "F1", label: "Open phone" },
{ key: "e", label: "Interact" },
{ key: "Space", label: "Handbrake" },
]key matches a physical key (letters, digits, F1-F12, Esc/Tab/Shift/Ctrl/Alt/
Enter/Space, arrows, …). It's case-insensitive and understands common aliases
(up, space, control, escape, …).
Social and staff links open in the player's actual default browser using
FiveM's openUrl native (window.invokeNative('openUrl', url)), so players
aren't stuck inside the game's frame. Outside FiveM it falls back to
window.open. Only http(s) URLs are allowed.
server.lua gathers the live player count and hostname using
framework-agnostic natives and auto-detects your framework (QBCore / ESX / Qbox
/ standalone) for display. client.lua forwards it to the loading screen via
SendLoadingScreenMessage. The UI merges it over the static config.server
values — if the server is unreachable for any reason, your configured fallback
is shown instead. No framework export is ever required.
The compiled UI in html/ is committed, so you do not need to build to use
the resource. To change the UI itself:
cd web
npm install
npm run dev # live preview in your browser (with simulated progress)
npm run build # rebuilds ../html from sourceStack: React 19 + Vite 7 + Tailwind CSS 4.
kivo-loading-screen/
├── fxmanifest.lua # resource manifest (loadscreen + cursor + files)
├── config.js # ← edit me (all configuration)
├── client.lua # forwards live server data to the UI
├── server.lua # framework-agnostic server info
├── images/ # ← your images go here
├── html/ # compiled UI (do not edit by hand)
└── web/ # UI source (React + Vite + Tailwind)
- Cursor / clickable buttons: enabled via
loadscreen_cursor 'yes'infxmanifest.lua. - Loading screen closes too early / too late: by default FiveM closes it
automatically when the session starts. If your spawn/multichar flow needs it to
stay up, uncomment
loadscreen_manual_shutdown 'yes'infxmanifest.luaand callShutdownLoadingScreenNui()from your spawn logic. - Fonts: the display fonts (Ruang, Benzin, Bai Jamjuree) are served over
httpsfrom a Cloudflare Worker on purpose — local@font-facefiles (nui://) do not render reliably inside FiveM's CEF. To swap a font, host your own copy on anyhttpsorigin and update the@font-faceURLs inweb/src/index.css, then rebuild.
Built by Kivo Studio. 💖