LR Loading Screen documentation

Install & configure

Everything you need to drop lrr_loading into a FiveM server — the install flow and load order, video and music setup, the single config.js reference, the framework name bridge, particles and patterns, and adding your own translation.

← Back to documentation hub

Install

Drop the resource. Place lrr_loading/ into your resources/ folder.
Ensure it early. Add ensure lrr_loading to server.cfg — before anything that touches the loading screen.
Point it at your assets. Put your video in assets/video/ and music in assets/audio/, then reference them in config.js.
Restart. The screen takes effect on the next client connect.

ensure lrr_loading        # add this early

Only one loadscreen

Only one resource may declare loadscreen. Stop any previous loading-screen resource so it doesn't compete with lrr_loading.

Video & music

The background video uses a multi-source fallback chain — the first source that decodes is shown. List as many as you like; put your most compatible format last as the safety net. The music player takes a playlist of local MP3 / OGG files.

video: [
    'assets/video/bg.webm',   // tried first
    'assets/video/bg.mp4',    // fallback
],

music: {
    autoplay: true,        // gesture-unlock fallback if blocked
    shuffle:  false,
    loop:     true,
    volume:   0.5,
    tracks: [
        { title = 'Night Drive', src = 'assets/audio/track1.mp3' },
        { title = 'Static',      src = 'assets/audio/track2.mp3' },
    ],
},

Autoplay note

Browsers block autoplay with sound until the user interacts. The player ships a gesture-unlock fallback — the first click / keypress starts playback at your configured volume.

config.js reference

The whole screen is driven by one object. These are the top-level keys.

Key	Type	Notes
`theme`	table	Accent, line and text colors as CSS variables — one block drives every accent.
`video`	list	Ordered MP4 / WebM source chain; first to decode is shown.
`music`	table	Playlist + `autoplay`, `shuffle`, `loop`, `volume`.
`particles`	table	Rising particle canvas: `palette`, `density`, `speed`, `size`.
`pattern`	string	`stripes`, `dots`, `hex`, `grid` or `off`, with edge masking.
`progress`	table	Stage labels for the animated progress bar.
`tips` / `rules`	list	Lines shown in the Tips and Rules tabs (or pulled from the locale).
`staff`	list	Staff cards: `{ name, role, avatar }` with color-coded role badges.
`serverStatus`	table	Online state, current / max players and ping for the status chip.
`socials`	list	Discord, website, store or anything from Iconify.
`locale`	string	Active language code (e.g. `en`, `hu`, `de`).

Framework name bridge

A bridge ships inside the resource and runs on every client connect. It detects the framework, pushes the FiveM display name into the welcome line immediately, then swaps in the character name once the framework loads it. No snippets to copy, no config to edit.

Framework	Detected	Name shown
Qbox	auto	character name (charinfo)
QBCore	auto	character name (charinfo)
ESX	auto	character name (firstName + lastName)
vRP	auto	character identity
Standalone / unsupported	fallback	FiveM display name

Particles & patterns

An animated rising particle canvas with a configurable palette, density, speed and size. Layer one of four pattern overlays with edge masking on top, or turn patterns off for a clean flat look.

particles: {
    palette: [ '#6fd6cf', '#ffffff' ],
    density: 60,
    speed:   0.6,
    size:    2,
},

pattern: 'hex',   // 'stripes' | 'dots' | 'hex' | 'grid' | 'off'

Tips, rules & staff

Three tabs with color-coded role cards. Roles map to four badge colors out of the box — owner, admin, dev and mod.

staff: [
    { name: 'Ferenc',  role: 'owner' },
    { name: 'Alex',    role: 'admin' },
    { name: 'Sam',     role: 'dev' },
    { name: 'Riley',   role: 'mod' },
],

serverStatus: { online: true, players: 42, max: 64, ping: 28 },

socials: [
    { icon: 'mdi:discord', url: 'https://discord.gg/...' },
    { icon: 'mdi:web',     url: 'https://intelnpc.com' },
],

Translations

Ten translations ship out of the box. Every UI string — rules, tips, progress stages and the welcome line — comes from a locale file in locales/. Switch the active language with the locale key.

Language	Code
English (default)	`en`
Hungarian	`hu`
German	`de`
French	`fr`
Italian	`it`
Spanish	`es`
Portuguese (BR)	`pt-BR`
Polish	`pl`
Czech	`cs`
Dutch	`nl`

To add your own, copy locales/en.json, translate the values, save it under your language code and set locale to match.

Compatibility

FiveM, any artifact with a loadscreen slot
ESX / QBCore / Qbox / vRP / standalone
No dependencies — nothing else to ensure

Pair with

Same studio, same glass-panel art direction as Intel NPC, Account Levels and NPC Chat. Run all four and the look lines up.