[FREE] [OPEN SOURCE] Darkside Development — Premium Glassmorphism Loading Screen v2

FiveM Releases
, , , ,
1

DarkSide Loading Screen Thumbnail
DarkSide Loading Screen Thumbnail1536×1024 407 KB

Darkside Development Loading Screen v2 is a fully-featured, production-ready FiveM loading screen built with a modern glassmorphism aesthetic, animated particle canvas background, and a complete music player — released completely free and open source through our Tebex store.

No external dependencies, no build tools, no npm. Drop it in, add ensure darkside_loadingv2 to your server.cfg, edit one config file, and you’re done.

Features

Visual Design

  • Futuristic glassmorphism UI with backdrop-blur panels, glowing electric-blue borders and animated corner decorators
  • Full-screen animated particle canvas — 60+ neon-blue nodes that drift and connect with glowing lines (30 fps cap, zero performance impact)
  • Scanline and noise overlay for a premium cyberpunk feel
  • Ambient glow orbs and CSS micro-animations throughout

Loading Bar

  • Driven by native FiveM NUI events — no guesswork
  • Handles loadFraction, startInitFunction (INIT_CORE / INIT_BEFORE_MAP_LOADED / INIT_SESSION), initFunctionInvoked, onConnectionProgress, DL_TXT and loadingScreenReady
  • Smooth exponential lerp so the bar always animates — never looks frozen
  • Falls back to a time-based simulation when tested in a browser

Music Player

  • Play / Pause, Prev / Next track cycling
  • Click-to-seek progress bar with live M:SS timestamp
  • Volume slider with real-time CSS fill
  • Auto-starts on load using the muted autoplay trick (works in FiveM’s CEF browser)
  • Supports unlimited .ogg tracks

Background Video Panel

  • Drop any local .mp4 or .webm into the /videos folder
  • Plays muted, looped, cover-fitted behind a configurable blue tint overlay
  • Set to null in config to disable with zero performance cost
  • (Note: YouTube iframes are blocked by FiveM’s CEF browser — local files only)

Server Rules Panel

  • Fully dynamic — generated from a JavaScript array in config.js
  • Add, remove or reorder rules without touching HTML
  • Auto-numbered with bold openers

Latest Updates Panel

  • Badged update cards with NEW / HOT / FIX tags (each a different colour)
  • Date, title and description fields — all from config.js

Buyer-Friendly Configuration

  • ALL text, tracks, rules and settings live in config.js
  • Buyers never need to open index.html, style.css or any logic file
  • Fully documented with inline comments

Compatibility

  • QBCore, ESX, vRP, standalone — framework-agnostic
  • Optional manual shutdown hook for player-spawned events
  • Tested at 1080p, 1440p, 3440×1440 ultrawide and 4K

File Structure

darkside_loadingv2/

├── fxmanifest.lua ← FiveM resource manifest

├── config.js ← :pencil: The only file you need to edit

├── index.html ← UI structure

├── style.css ← Glassmorphism design system (~1 000 lines)

├── script.js ← All logic: NUI events, music player, video bg

├── background.js ← Particle canvas animation

├── music/ ← Drop your .ogg tracks here

├── videos/ ← Drop your .mp4 background here

└── README.md ← Full documentation

Installation

  1. Drop darkside_loadingv2 into your resources/ folder.
  2. Add to server.cfg — before your framework:
ensure darkside_loadingv2
  1. Open config.js and fill in your server name, rules, updates and tracks.

Full documentation is included in README.md.

Configuration Example

js

// config.js — the only file you ever touch

logoBrandPrimary : ‘Dark’,

logoBrandAccent : ‘side’,

logoSubtext : ‘Development · FiveM’,

statusText : ‘Server Online’,

rules : [

{ strong: ‘Respect everyone.’, text: ‘No harassment of any kind.’ },

{ strong: ‘No RDM / VDM.’, text: ‘Random deathmatch is forbidden.’ },

],

updates : [

{ tag: ‘new’, date: ‘20 May 2026’, title: ‘New Heist System’, desc: ‘…’ },

],

defaultVolume : 70,

tracks : [

{ name: ‘Neon Horizons’, artist: ‘Darkside Soundtrack’, duration: ‘3:58’, file: ‘music/track1.ogg’ },

],

backgroundVideo : null, // ‘videos/bg.mp4’ to enable

backgroundVideoOverlay : ‘rgba(0,15,50,0.55)’,

Download

:link: Download Free on Tebex →

The resource is completely free and open source. No payment required, just download.

Screenshots

*

Loading Screen
Loading Screen1913×947 192 KB

Support

Join our Discord for support, updates and community discussion.

:link: Join our discord for updates & support

Credits

Built and maintained by Darkside Development. Feel free to fork, modify and build on top of it — just don’t resell it as your own.
Code is accessible Yes
Subscription-based No
Lines (approximately) ~2 500
Requirements None
Support Yes
5 Likes