Ultimate FiveM Loading Screen - Dynamic Videos, Music & Full Customization | QBCore / QBX / ESX

FiveM Releases
, , , , , , ,
1

Screenshot :

fd765aacc0bde7f127806642d50562ac8b47e571
fd765aacc0bde7f127806642d50562ac8b47e571570×309 227 KB

This comprehensive loading screen solution provides an immersive and engaging experience for players from the moment they connect. Built with modern web technologies and designed for maximum customization and performance.

:sparkles: Key Features

:clapper: Dynamic Backgrounds

  • Video Carousel: Rotate multiple background videos seamlessly
  • Image Carousel: Slideshow of custom images
  • Single Video: Traditional video background
  • Gradient: Clean, modern gradient backgrounds

:musical_note: Audio System

  • Background Music: Custom audio with volume controls
  • Spacebar Controls: Players can play/pause music easily
  • Auto-play Support: Configurable audio behavior

:bar_chart: Real-time Progress

  • Live Progress Tracking: Syncs with actual FiveM loading state
  • Animated Progress Bar: Smooth, modern progress visualization
  • Loading Steps: Clear status messages for each loading phase

:art: Modern UI Design

  • Sleek Interface: Dark theme with subtle animations
  • Particle Effects: Optional animated background elements
  • Responsive Design: Works on all screen sizes
  • Custom Cursor: Themed cursor with glow effects

:clipboard: Server Information Display

  • Server Stats: Current/max players, uptime, ping, location
  • Feature Highlights: Showcase your server’s unique features
  • Server Rules: Clear, organized rule presentation
  • Loading Tips: Rotating tips to keep players engaged

:wrench: Advanced Features

  • Changelog Display: Show recent server updates
  • Tebex Store Integration: Direct links to your server store
  • Social Media Links: Discord, YouTube, Twitter integration
  • Player of the Month: Highlight community members

:hammer_and_wrench: Installation

  1. Download the resource package
  2. Extract to your resources folder
  3. Edit config.json with your server information
  4. Add your media files to the assets/ folder
  5. Add ensure [resource-name] to your server.cfg
  6. Restart your server

:gear: Configuration

Everything is configured through a single config.json file:

{
  "server": {
    "name": "Your Server Name",
    "tagline": "Your Server Tagline",
    "description": "Your server description..."
  },
  "theme": {
    "background": {
      "type": "videoCarousel",
      "videoCarousel": {
        "videos": ["./assets/video1.mp4", "./assets/video2.mp4"],
        "interval": 5000
      }
    }
  },
  "audio": {
    "enabled": true,
    "backgroundMusic": {
      "url": "./assets/music.mp3",
      "volume": 0.3
    }
  }
}

:file_folder: File Structure

moon-loadinscreen/
├── config.json              # Main configuration
├── assets/
│   ├── video1.mp4           # Background videos
│   ├── video2.mp4
│   └── music.mp3            # Background music
├── fxmanifest.lua          # FiveM resource manifest
└── dist/                   # Built files

:dart: Features Breakdown

  • :white_check_mark: No coding required - Just edit JSON configuration
  • :white_check_mark: Browser testing mode - Preview without FiveM
  • :white_check_mark: Optimized performance - Lightweight and efficient
  • :white_check_mark: Cross-platform compatibility - Works on all devices
  • :white_check_mark: Regular updates - Ongoing feature additions

:shopping_cart: Purchase & Support

:moneybag: Purchase: Moon Scripts Store

:sos: Support: Installation Guide Video

:arrows_counterclockwise: Changelog

  • v1.0.0 - Initial release with video carousel, audio support, and full customization

Give your players the premium loading experience they deserve! :star2:
Code is accessible No
Subscription-based No
Lines (approximately) 500+
Requirements None
Support Yes
1 Like