🔃 px-loading (Free Edition)
Free high-performance FiveM loading screen featuring smooth video and slider backgrounds, built-in HTML5 music player, and customizable live announcements board.
📋 Compatibility & Requirements
| Component / Layer | Supported | Version / Requirements |
|---|---|---|
| ESX Legacy | ✅ Supported | Full support (All versions) |
| QBCore | ✅ Supported | Full support (All versions) |
| Qbox (QBX) | ✅ Supported | Full support (All versions) |
| Standalone | ✅ Native | Works on any FiveM server build |
| Database | ⚡ None | Pure client-side NUI, no SQL required |
| Performance (Resmon) | ⚡ 0.00ms | 0.00ms Idle • 0.00ms Active |
| Minimum Artifact | 5848+ | FiveM server artifact build |
Installation
Download & Extract
Download the resource and extract it into your server’s resources directory.
Folder Name: We recommend naming the resource folder px-loading (or px-loading-free).
- fxmanifest.lua
- index.html
- config.js
Add to Server Config
Add the startup command to your server.cfg:
ensure px-loadingConfiguration
Open public/config.js to customize the appearance, music, and background options:
window.Config = {
// [GENERAL SETTINGS]
ServerName: "PIXEL",
ServerColor: "ROLEPLAY",
SubTitle: "Welcome to the City",
SeasonText: "Season 2",
SeasonStatus: "Live",
NewsText: "Latest Updates",
Loading: "Loading...",
Status: "Status",
// [BACKGROUND SETTINGS]
// Choose the background mode: "video", "slider", "image"
BackgroundType: "video",
// [IMAGE SETTINGS]
// Used if BackgroundType is "image" or "slider"
// 0 = Random Image, 1 = First Image, 2 = Second Image, etc.
SelectedImage: 0,
// List of images for "image" or "slider" modes
Images: [
"https://4kwallpapers.com/images/walls/thumbs_3t/10749.jpg",
"https://4kwallpapers.com/images/walls/thumbs_3t/10829.jpg",
"https://4kwallpapers.com/images/walls/thumbs_3t/10593.jpg"
],
// [VIDEO SETTINGS]
// Used if BackgroundType is "video"
// IMPORTANT: Place your video file inside the 'public/assets/' folder
VideoFile: "./assets/background.mp4",
// [THEME COLOR]
// Main accent color for buttons, highlights, and progress bars (HEX)
AccentColor: "#c026d3",
// [MUSIC PLAYER]
// Default music volume (0.0 to 1.0)
MusicVolume: 0.2,
// List of songs to play (remote URL or local 'assets/song.mp3')
MusicList: [
{ file: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", name: "Loading Vibes - PX Mix" },
{ file: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3", name: "Chill Step - Night" }
],
// [SOCIAL MEDIA]
// Links displayed in the news section (leave empty to hide)
Discord: "discord.gg/pixelsoft",
Twitter: "@pixelsoft",
Website: "https://pixelsoft.tr",
// [NEWS / ANNOUNCEMENTS]
// Updates displayed in the middle section
// Available colors: "green", "blue", "yellow", "red", "purple"
News: [
{ tag: "UPDATE", color: "green", title: "Economy Update v2", desc: "Job salaries adjusted." },
{ tag: "EVENT", color: "blue", title: "Weekend Racing", desc: "Saturday 9:00 PM." },
{ tag: "INFO", color: "yellow", title: "Whitelist Apps", desc: "Applications are open." }
]
};Video Background Tip: When using a video background, make sure your .mp4 file is lightweight (preferably under 25MB) to ensure instant loading for connecting players.
Need Help?
👾 Join Our Discord Community
Have questions or suggestions for the free loading screen? Visit our Discord server.
Get Support ↗
Created with ❤️ by PixelSoft