Vault Loading Screen

Installing

1. Unzip it into your resources/ folder. The archive opens to a single vault-loadingscreen/ folder, so it lands in the right place on its own.
2. Add it to server.cfg:

   ensure vault-loadingscreen

3. Start the server and connect.

It runs immediately with placeholder text, so you can see it working before you change anything. Keep the folder name — FiveM takes it literally, and if you rename the folder you must rename the ensure line to match.

It needs nothing else. No ox_lib, no database, no framework. QBox, QB-Core, ESX or a bare server.

Everything is in config.lua

One file holds the name, the colour, all five slides, the music and the timings. You do not need to open the HTML, the CSS or any other Lua file.

Edit config.lua, restart the resource, reconnect.

config.lua is deliberately left unencrypted. Everything else in the resource is protected, so if you are looking for a setting and it is not in this file, it is not a setting.

Your name and links

Config.brand = {
  nameLeft  = 'YOUR',       -- plain
  nameRight = 'SERVER',     -- painted in your accent colour
  tagline   = 'Your Tagline Here',
  website   = 'yourserver.com',
  discord   = 'discord.gg/yours',
  location  = 'Los Santos',
}

The name is split in two because the second half is coloured. Split it where it reads best: OLD|TIMES, NEW|CITY, VAULT|RP.

Set website or discord to '' and that line disappears rather than showing an empty one.

Your logo is html/assets/logo.png. Replace it with a square transparent PNG, around 256×256.

The colour

Config.colour = {
  accent = '#d63a34',
  light  = '#ef5a52',
  dark   = '#3d0f0c',
}

accent repaints the glow behind the artwork, the colour grade over the screenshots, the icon tiles, the progress bar and the highlighted word in each headline.

If you only change one, change that one. The other two being slightly off is far less noticeable than you would expect — they are only used for the gradient on the headline and the bar.

The slides

Five ship with it, but any number works — the progress dots at the bottom count themselves.

{
  kicker     = '03  /  The Underworld',
  headline   = 'Run the',
  accentWord = 'Streets',          -- this word gets the colour
  backdrop   = 'bg-crime.jpg',     -- html/assets/images/
  art        = 'art-crime.png',    -- alpha-trimmed PNG, or '' for none
  features   = {
      { icon = 'shield-star', bold = 'Crews with ranks.',
        text = 'Who gets in, and who holds the keys.' },
      { icon = 'traffic-cone', bold = 'Heists on a timer,',
        text = 'with the police already on the way.', soon = true },
  },
},

• Four feature lines per slide, no more. A fifth is dropped and a note printed to the client console (F8) — it has no entry animation and crowds at 1080p.
• Under about twenty words a line, or it wraps badly at 1440p.
• bold is what a skimming player reads. Two or three words. Everything after it is for the ones still waiting.

Copy and artwork sit in separate grid columns, so they cannot overlap at any aspect ratio however long your headline is. Below 4:3 the layout collapses to one column on its own.

Saying what is not built yet

Put soon = true on any feature line and it turns grey with a small BUILDING tag.

It is the most useful setting in the file. A loading screen promising a prison on the day there is no prison is the fastest way to lose somebody in their first hour — they go looking, do not find it, and read everything else on the screen as a lie too.

A list that admits which half is live reads as a roadmap instead, and a roadmap is the thing players forgive.

Timings and the progress bar

Config.display = {
  slideMs = 9000,   -- how long each slide holds
  creepTo = 92,     -- where the bar creeps to on its own; 0 disables it
}

The bar reads FiveM's own load events, so the percentage and the status line under it are what is actually happening rather than an animation pretending.

Why it creeps. Some clients load so fast that FiveM reports almost no progress at all, and a bar sitting at 4% reads as a crash rather than as a fast load. So it creeps to creepTo on its own and then waits for real events. Set it to 0 and you will see only true progress, including on the clients where that means almost none.

Music

No track ships with the resource, on purpose: background music is almost never licensed for redistribution.

Put an mp3 at html/assets/music/theme.mp3 and switch it on:

Config.music = {
  enabled = true,
  volume  = 0.42,
}

It fades in, shows a mute button, and fades out when the screen dismisses. Leave enabled false, or leave the file out, and the mute button hides itself so nothing looks broken.

Make sure you have the right to use the track. A Content ID claim on a streamer's video is a bad way to find out you did not.

When the screen goes away

The screen does not dismiss itself. Something has to say when the player is actually in the world, and there are two ways to run it.

Config.externalShutdown = false

false — we handle it. The screen goes as soon as the client finishes loading. Works with anything. The player may see the map for a second or two before your spawn selector appears.

true — your spawn resource handles it. The screen plays its exit animation and waits for something to call ShutdownLoadingScreenNui(). The handoff is seamless, with no flash of the map.

Check before you set this true. qbx_spawn, qb-spawn, esx_spawn and most multicharacter scripts already make that call. If nothing on your server does, players sit on the loading screen forever. When in doubt, leave it false.

Icon names

Use any of these in a feature line's icon. An unknown name draws the briefcase and says so in the client console rather than leaving an empty square.

briefcase        trend-up         cards-three      crown-simple
users-three      scales           steering-wheel   coffee
buildings        shield-star      traffic-cone     sparkle
gauge            game-controller  identification-card
currency-circle-dollar

Your own artwork

Everything is in html/assets/images/.

• Backdrops — 1600×900 JPG. In-game screenshots work best; the screen grades them toward your accent colour so they stop looking like raw captures.
• Key art — alpha-trimmed PNG, so the edges of the file are the edges of the subject. Anything else and it appears to float.

The bundled artwork is not ours. The backdrops and character art are GTA V screenshots and Rockstar promotional art, included so the resource looks right the moment you install it. They are the property of their owners and are not covered by the licence. Swap in your own server's screenshots before you go live — it takes about ten minutes and it makes your server look like your server.

If something is wrong

It shows “YOUR SERVER” instead of my settings. config.lua did not load. Check the client console (F8) — a syntax error in that file is reported there. The screen falls back to its built-in defaults rather than showing a black rectangle, which is why it looks like it is working.

The mute button is missing. That is the default. Config.music.enabled is false, or there is no theme.mp3. Both are reported in the console.

Players are stuck on the loading screen. Config.externalShutdown is true and nothing on your server calls ShutdownLoadingScreenNui(). Set it back to false.

An icon is a briefcase when it should not be. The name in icon is not one of the listed ones. The console names the one it did not recognise.