🎮 Loading Screen

A modern, animated loading screen for FiveM servers — built with vanilla HTML, CSS and JavaScript. No frameworks, no dependencies.

Free HTML/CSS/JS

View on GitHub

Features

Animated background slideshow with smooth transitions

Real-time loading progress synced with FiveM's loadFraction

Live loading steps (Initializing engine, Loading shaders, etc.)

Web Audio API visualizer (real frequency bars)

Custom animated cursor

Music player with volume control + localStorage persistence

Side panel overlays: Patch Notes, Base Rules, Staff

Info tips bar with rotation

Fully configurable via config.lua

Installation

1

Drop the loading-screen folder into your FiveM resources/ directory

2

Add to your server.cfg:

server.cfg

ensure loading-screen

3

Edit config.lua with your server info

4

Replace logo, backgrounds and music with your own assets

fxmanifest.lua

fx_version 'cerulean'
game 'gta5'

loadscreen 'index.html'
loadscreen_cursor 'yes'
loadscreen_manual_shutdown 'yes'

loadscreen_manual_shutdown 'yes' keeps the screen visible until the server sends the shutdown signal — recommended for a smoother experience.

File Structure

Structure

loading-screen/
├── index.html
├── script.js
├── styles.css
├── config.lua
├── fxmanifest.lua
└── assets/
    ├── image/
    │   ├── bg1.jpg ... bgN.jpg   ← background slides
    │   └── server-logo.png
    └── music/
        └── remix-theme-music.mp3

Configuration

Everything is configured in config.lua:

config.lua

Config.DiscordInvite = "DISCORD.GG/YOURSERVER"

Config.InfoTips = {
    "Your tip here",
    ...
}

Config.PatchNotes = {
    { version = "v1.0.0", entries = { "Entry 1", "Entry 2" } }
}

Config.BaseRules = {
    "Rule 1",
    "Rule 2",
    ...
}

Config.Staff = {
    { role = "owner",   name = "YourName" },
    { role = "dev",     name = "YourName" },
    { role = "admin",   name = "YourName" },
    { role = "mod",     name = "YourName" },
    { role = "support", name = "YourName" }
}

Music & Backgrounds

Adding Backgrounds

Drop your images in assets/image/ named bg1.jpg, bg2.jpg, etc. The script auto-discovers them up to bg20.jpg.

Music

Replace assets/music/remix-theme-music.mp3 with your own track. Volume is saved in localStorage between sessions.

Shortcut	Action
`SPACE` or `M`	Pause / Resume music
`↑` / `↓`	Volume up / down
Click `−` / `+`	Volume buttons on player