RPSync Loading Screen

RPSync Loading Screen

A modern, fully customizable loading screen designed to replace the default FiveM / ESX loadscreen on roleplay servers.

Works with any framework (ESX, QBCore, standalone) — it only replaces the client’s startup screen, no dependency on any resource.

---

✨ Features

Core Features

• Configurable background: animated CSS gradient (default, no asset required), fixed image, or looping video
• Server logo or stylized server name
• Rotating tips with fade transition
• Real progress bar, wired to the actual FiveM engine loading events
• Clickable social links (Discord, website, TikTok, Instagram, Twitter/X, YouTube)
• Animated background particles (togglable)
• Multilingual: French and English included
• Built-in browser preview mode
• Escrow protection

Reliability

• No external network requests — nothing can break the loading screen
• Built-in safety timeout: the screen can never get stuck indefinitely, even if the UI fails to respond

---

🔒 Security

• Client logic (client/main.lua) and UI logic (html/script.js) are encrypted on publication
• config.lua, locales/*.lua, html/index.html, html/style.css and visuals stay editable

---

📋 Requirements

• FiveM server running
• No framework dependency (works standalone)

---

📦 Installation

Step 1 — Download

Download the script from your Tebex purchase.

Extract the archive to:

resources/rpsync_loadingscreen

---

Step 2 — Disable any other loadscreen

Only one loadscreen resource can be active at a time. Remove or comment out any other resource declaring loadscreen in its fxmanifest.lua.

---

Step 3 — Add to server.cfg

Add the resource, ideally near the top of your server.cfg:

ensure rpsync_loadingscreen

---

Step 4 — Restart server

Restart the resource or the whole server, then reconnect to see the loading screen — it only appears on a full client connection, not on a simple resource restart.

---

⚙️ Configuration

All configuration is located in:

config.lua

---

Language

Config.Locale = 'fr'

Available languages:

en, fr

---

Server name & branding

Config.General = {
    ServerName = 'Votre Serveur RP',
    Slogan     = 'Vivez votre propre histoire',
}

---

Background

Config.Branding.BackgroundType = 'css' -- 'css' | 'image' | 'video'

Place your images/videos in html/images/ and reference them in Config.Branding.Background.ImagePath / VideoPath.

---

Tips

Config.Tips = {
    'Utilisez /me et /do pour enrichir votre roleplay.',
    'Rejoignez notre Discord pour ne rien manquer.',
}
Config.TipsRotationInterval = 6000

---

Social links

Config.Socials = {
    { label = 'Discord',  icon = 'discord', url = 'https://discord.gg/votreserveur' },
    { label = 'Site Web', icon = 'web',     url = 'https://votresite.fr' },
}

Available icons: discord, web, tiktok, instagram, twitter, youtube.

---

🖼 Preview without restarting the server

Open html/index.html directly in a browser (double click) to preview your configuration with a simulated loading sequence — useful to tweak colors and tips quickly.

---

🐛 Troubleshooting

Loading screen never disappears

A built-in safety timeout (Config.General.SafetyTimeout, 6s by default) always forces the screen closed. If this still happens, check the F8 client console for a JavaScript error and make sure no other resource also declares loadscreen.

Background image/video not showing

Make sure the file is listed in the files { ... } block of fxmanifest.lua.

”Multiple loadscreens” warning

Another resource also declares loadscreen in its fxmanifest.lua — disable it.

---

📊 Changelog

1.0.0

• Initial release
• CSS / image / video background modes
• Rotating tips, social links, particles
• Safety timeout against stuck loading screens

---

📞 Support

Before requesting support:

1. Check documentation
2. Check F8 console
3. Restart resource

Support channels:

• Discord
• Tebex Store

---

📜 License

RPSync License

Allowed:

• Use on your server
• Modify configuration
• Modify translations

Not allowed:

• Resell
• Redistribute
• Remove escrow protection