Loading
FiveM
FiveM loading screen resource
A video loop costs every joining player a download and still stutters. A live scene costs nothing and runs at their refresh rate.
For FiveM · 1920×1080
Shown at the real ratio with the Neon Shore Anime design. Hover to animate. Previews are watermarked.
- Target size
- 1920 × 1080 pixels
- Still render
- 1920 × 1080 PNG
- Animated render
- 1920 × 1080, MP4 30fps, 6.0s and FiveM resource
- Transparency
- Opaque
- Set in
- resources/<yourserver>_loading, enabled with one ensure line in server.cfg
- Platform
- FiveM
What fivem loading screen is for
The loading screen in a pack is not an image and not a video. It is a self-contained FiveM resource: a folder with an fxmanifest.lua, an index.html, a stylesheet, the scene runtime, the display fonts and a README. You copy it into resources, add ensure yourserver_loading to server.cfg and restart. There is nothing to configure and no framework dependency.
The manifest is minimal and worth understanding, because people break loading screens by guessing at it. It declares fx_version 'cerulean' and game 'gta5', then loadscreen 'index.html' to tell the client which page to render during load, and loadscreen_cursor 'yes' so a player can click a link on it. Everything the page needs has to be listed in the files block, including the fonts, or the client silently serves nothing and you get a black screen. That is the single most common cause of a loading screen that works locally and not on the server.
Because the scene is a live page rather than a video, it renders at whatever resolution and refresh rate the client is running. There is no 1080p video being upscaled to 1440p, no fixed frame rate, and no multi-megabyte download before anything appears. The page scales itself by reading window.innerWidth against the 1920x1080 authoring size and setting a CSS scale factor, so the composition is identical on an ultrawide and on a laptop.
The progress bar, if you enable it, is wired to FiveM's real loading events rather than a fake timer. The page listens for the loadProgress message and reads loadFraction from it, and it maps the client's phase events to readable status lines: startInitFunction, startDataFileEntries, performMapLoadFunction, startInitFunctionOrder, initFunctionInvoking and endInitFunction each become a short message. That means the bar actually tracks the load, which is the difference between a loading screen that reassures a player and one that makes them think the server has hung.
Music is left off by default and switched on by dropping an MP3 next to app.js, setting one variable at the bottom of that file and adding the filename to the files block. It is off by default on purpose: autoplay with sound is the fastest way to make a first-time player alt-tab, and plenty of servers would rather not.
Constraints
- Ships as a resource folder, not a media file
- fxmanifest declares loadscreen 'index.html' and loadscreen_cursor 'yes'
- Also includes a 30fps 1920x1080 MP4 of the same scene for store pages and trailers
Mistakes that cost people a re-upload
- Forgetting to list the fonts in the files block, which gives a black screen on the live server but not locally
- Using set instead of ensure, or naming the resource folder differently from the manifest name
- Shipping a 40MB video loop and adding it to every player's first join
- Enabling autoplay music with the volume high
FiveM loading screen questions
How do I install a FiveM loading screen?
Copy the resource folder into your server's resources directory and add ensure yourserver_loading to server.cfg. The manifest already declares loadscreen 'index.html', so nothing else is needed.
Why is my loading screen a black screen on the server but fine locally?
Almost always a missing entry in the files block of fxmanifest.lua. Anything the page loads, including every font file, has to be listed there or the client cannot fetch it.
Is the progress bar real?
Yes. The page listens for FiveM's loadProgress message and reads loadFraction, and maps the client's phase events to the status line, so it tracks the actual load rather than a timer.
Can I add background music?
Yes. Drop an MP3 next to app.js, set the MUSIC variable at the bottom of that file and add the filename to the files block in the manifest. It is off by default.
Designs that suit 1920x1080
This is a minute of uninterrupted viewing at full screen, so the widest tonal range and the most depth pay off here more than anywhere else.
Neon Shore Anime
from $12Neon Shore rendered as anime artwork, with live motion, drifting particles and a chromed wordmark. Every format in the catalogue, still and animated.
20 formats, 46 filesNeon Shore Grunge
from $12Neon Shore rendered as grunge artwork, with live motion, drifting particles and a chromed wordmark. Every format in the catalogue, still and animated.
20 formats, 46 filesNeon Shore Painted
from $12Neon Shore rendered as painted artwork, with live motion, drifting particles and a chromed wordmark. Every format in the catalogue, still and animated.
20 formats, 46 filesNeon Shore Photoreal
from $12Neon Shore rendered as photoreal artwork, with live motion, drifting particles and a chromed wordmark. Every format in the catalogue, still and animated.
20 formats, 46 filesDowntown Dusk Anime
from $12Downtown Dusk rendered as anime artwork, with live motion, drifting particles and a chromed wordmark. Every format in the catalogue, still and animated.
20 formats, 46 filesDowntown Dusk Grunge
from $12Downtown Dusk rendered as grunge artwork, with live motion, drifting particles and a chromed wordmark. Every format in the catalogue, still and animated.
20 formats, 46 files
