NullSect Loading Screen (`ns-loading`)

A premium, white-label loading screen for FiveM roleplay servers, by NullSect.

It has a cinematic night skyline, a progress bar driven by FiveM's real loading events, a music player, rotating tips, a tabbed info panel and full English/Turkish support. You customize everything from a single config.js. There are no frameworks, no CDNs, no remote fonts and nothing to build.

Installation: install, player name & count, team from Discord, manual shutdown, troubleshooting.
Configuration: every option in html/config.js and the browser preview.
Changelog

Features

Real progress, never faked. The bar and the percentage come from FiveM's loadProgress event (loadFraction, 0–1). The status line ("Loading game data", "Joining the session"…) and the step counter come from FiveM's own init and data-file events. Until the first real value arrives, the bar shows a calm "standby" sweep, not an invented number.
Built-in cinematic background. A procedurally drawn Los Santos-style skyline with fog, searchlights, aviation lights, palms and film grain. It needs no files. You can also use your own image, slideshow or video, and the built-in scene takes over automatically if your file is missing or broken.
White-label. Your server name, logo, colours and texts. The NullSect signature is small and can be switched off with one setting.
Music player. Play/pause, mute, volume, playlist, and the volume choice is remembered. It respects autoplay restrictions honestly: if the browser blocks autoplay, the player says so instead of pretending to play.
Content. Rotating tips, and a tabbed panel with about, rules, updates and community links. Sections can be reordered or turned off.
English & Turkish out of the box, with correct Turkish capitalisation (i → İ). Adding more languages is easy.
Responsive. Tested layouts from 1280×720 to 4K, ultrawide 21:9, 16:10, 5:4, 4:3, portrait and small windows.
Safe & light. All text is inserted as plain text (never HTML), links are validated (http/https only) and every config value is validated with safe defaults. The two small server scripts (player name & count, team from Discord) are optional and send players only public data.
Accessible. Keyboard focus styles, ARIA labels, a live status region and prefers-reduced-motion support.

How the loading lifecycle works

FiveM shows the page as soon as the player starts connecting, and posts messages such as loadProgress, startInitFunctionOrder and onDataFileEntry to it.
html/js/boot.js starts listening immediately (in <head>) and buffers early messages, so nothing is lost while the page loads.
Reaching 100% never closes the screen. FiveM decides when loading is over. With manual shutdown (the default), client/shutdown.lua closes it after a fade. With it turned off, FiveM removes the loading screen itself when it has finished loading.
Clicking anywhere never closes the screen, and there are no fake menus.

File structure

ns-loading/
├── fxmanifest.lua           Resource manifest (loadscreen, files)
├── README.md / README.tr.md
├── client/shutdown.lua      Manual-shutdown fade helper (on by default)
├── server/handover.lua      Player name + count handover (on by default)
├── server/discord-team.lua  Staff list from Discord via your bot (idle without a token)
├── remote-content.example.json  Example file for remote.url (news & team)
└── html/
    ├── index.html           Markup and icon sprite
    ├── config.js            ← your settings
    ├── locales/             en.js, tr.js (interface strings)
    ├── css/
    │   ├── main.css         Theme, typography, layout, components
    │   ├── scene.css        Background layers
    │   ├── animations.css   All motion, reduced-motion & low-performance rules
    │   └── responsive.css   Aspect-ratio and size adaptations
    ├── js/
    │   ├── boot.js          Early message buffer and failsafe reveal
    │   ├── utils.js         Safe DOM/text/URL helpers
    │   ├── i18n.js          Localization
    │   ├── config-loader.js Defaults and validation
    │   ├── background.js    Built-in scene, image/slideshow/video and fallbacks
    │   ├── loading-progress.js  FiveM events → progress, status, steps
    │   ├── audio.js         Music player
    │   ├── tips.js          Rotating tips
    │   ├── content.js       Branding, hero, panel, links, credit
    │   ├── live.js          Live player / Discord counts, remote news & team
    │   ├── preview.js       Browser preview tools (?preview=1 only)
    │   └── app.js           Startup, theme, keyboard, visibility, shutdown
    └── assets/              images/ videos/ audio/ fonts/ (your files)

NullSect Loading Screen (ns-loading)

Features

How the loading lifecycle works

File structure

NullSect Loading Screen (`ns-loading`)