r_loading Configuration
Configure r_loading in web/build/config.js: branding, background video, accent colour, music, social buttons, updates, team, rules and keybinds.
Everything lives in web/build/config.js. It is a plain JavaScript file that sets
window.R_CONFIG. The loading screen reads it directly, so there is no Lua config and
nothing to build. Edit it, restart the resource and reconnect.
After editing config.js, run restart r_loading (or restart the server) and
reconnect to see your changes. Every section below has an enabled switch. Set it to
false to hide that feature.
Branding
serverName: 'R-Scripts',
logo: 'media/images/logo.png',Background Video
video: {
src: 'media/video/background.mp4',
brightness: 0.35 // 0 = black, 1 = full brightness
},Lower the brightness if your text is hard to read over a bright clip.
Use a local .mp4 (H.264) file inside web/build/media/video. Streaming links such as
YouTube do not work.
Accent Colour
colors: {
primary: '#9a27ea' // any hex; used for the bar, icons and highlights
},Progress & Log
progress: {
showLog: true, // live feed of what's loading, next to the spinner
showPercent: true // big percentage on the right
},Music Player
Add as many tracks as you like. Players get next/previous, a seek bar, volume and mute.
music: {
enabled: true,
autoplay: true,
defaultVolume: 0.2, // 0 to 1
tracks: [
{ title: 'Ambient One', artist: 'R-Scripts', src: 'media/music/track1.mp3' },
{ title: 'Night Drive', artist: 'R-Scripts', src: 'media/music/track2.mp3' }
]
},Players can toggle playback with the spacebar. Each track's src must be a local
.mp3 inside web/build/media/music. The same streaming limitation as the video applies.
Social Buttons
Icon buttons in the top-right corner. Hovering shows the label, clicking opens the link in the player's browser.
social: {
enabled: true,
links: [
{ label: 'Discord', icon: 'discord', url: 'https://discord.gg/rscripts' },
{ label: 'YouTube', icon: 'youtube', url: 'https://www.youtube.com/@rscriptsfivem' },
{ label: 'TikTok', icon: 'tiktok', url: 'https://www.tiktok.com/@rscripts' },
{ label: 'X', icon: 'x', url: 'https://twitter.com/yourserver' },
{ label: 'Store', icon: 'store', url: 'https://r-scripts.net' }
]
},Available icon values: discord, youtube, tiktok, x, store, website.
Side Rail Panels
The four sections below are the tabs of the icon rail on the left of the screen. Each one
opens a flyout next to the rail. A tab is hidden automatically when its section is
enabled: false or its list is empty.
Updates
Changelog and announcements.
updates: {
enabled: true,
items: [
{ date: '16.6.2026', title: 'New era update', body: 'A fresh, modern loading screen.' }
]
},Team
Your staff list.
team: {
enabled: true,
members: [
{ name: 'Staff Member', role: 'Administrator' },
{ name: 'Helper', role: 'Moderator' }
]
},Rules
One line per rule.
rules: {
enabled: true,
items: [
'Be respectful to all players and staff.',
'No cheating or exploiting.',
'Use common sense.'
]
},Keybinds
Shown on an on-screen keyboard: every listed key lights up in your accent colour, and hovering it shows the action.
keybinds: {
enabled: true,
items: [
{ key: 'F1', action: 'Phone' },
{ key: 'F2', action: 'Inventory' },
{ key: 'F3', action: 'Emote menu' },
{ key: 'B', action: 'Seatbelt' }
]
},key is the label printed on a tenkeyless keyboard: letters, digits, F1 to F12, Tab,
Space, Enter, Shift, Ctrl, Alt and the arrow/navigation keys. Matching ignores case.
The loading screen disappears on its own once the game finishes loading. There's nothing to configure for that.
Next Steps
Interface Colours
The loading screen reads its colours from config.js:
colors: {
primary: '#9a27ea', // one accent colour for the bar, icons and highlights
button: '#ffffff', // solid buttons (the music play button)
buttonText: '#000000' // text/icon on those buttons
}These are the same tokens every other R-Scripts resource exposes as R.UI in config.lua, so one
palette carries across the whole fleet.
