💾X_Loadingscreen

Modern & Fully Customizable Loading Screen for FiveM

🎯 Overview A sleek, dynamic loading screen system with music, video, social links, and optional cinematic transitions. Perfect for immersive roleplay servers or custom FiveM communities.

---

🔧 Key Features

1. Visual UI & Layout

• Glowing progress bar with configurable color and strength

• Server name with full styling options (font, size, shadow, casing)

• Upload your own server logo (supports fill effect synced with progress)

• Optional sidebar with tabs for Rules, Team, News, etc. (Font Awesome icons supported)

• Social media sidebar with external link support (Discord, YouTube, etc.)

• Custom cursor support (image-based)

Config.cursor = {
  useCustomCursor: true,
  cursorType: "custom",
  customCursorPath: "assets/images/cursor.png"
}

---

2. Background Options

• Image Slideshow: Change interval, multiple backgrounds

• YouTube Video: Custom start time and volume

• Local MP4 Video: Fullscreen, looped, and optionally muted

Config.backgroundType = "youtube"; // Options: "image", "youtube", "local_video"
Config.youtubeVideoID = "dQw4w9WgXcQ";
Config.youtubeStartTime = 30;

---

3. Music Integration

• Stream via SoundCloud or play local MP3

• Volume control & mute button in UI

• Show/hide music controls

Config.music = {
  useLocalMusic: true,
  localMusicPath: "assets/music/background.mp3",
  volume: 50,
  showControls: true
}

---

4. Cinematic Transitions

Sky-to-ground camera effect when players load in (optional).

Config.transition = {
  enabled = true,
  startHeight = 500.0,
  transitionTime = 5000,
  randomDirection = true,
  fov = 120.0,
  smoothHeading = true
}

🛠 Trigger manually if using character selection scripts:

exports['X_Loadingscreen']:PlayTransition()

---

5. Debug & Timing

• Fade-in/out configurable in milliseconds

• Debug mode for troubleshooting

• Optional log message when players connect

Config.debugMode = true
Config.PrintPlayerConnecting = true

---

6. Tabs & Custom Content

• Create tabs for Rules, Team, News, Commands, etc.

• Fully HTML/CSS editable content per tab

• Icons via Font Awesome (e.g., fas fa-gavel, fab fa-discord)

Config.tabs = {
  rules: {
    enabled: true,
    title: "Rules",
    icon: "fas fa-gavel",
    content: `HTML goes here`
  }
}

---

7. Social Media Sidebar

• Fully customizable list with icons and labels

• Sidebar open/closed by default

• Opens external links in browser via NUI

Config.socialMedia = {
  enabled: true,
  links: [
    { platform: "discord", icon: "fab fa-discord", url: "https://discord.gg/yourserver" }
  ]
}

---

🖌 Styling & UI Customization Adjust theme colors, text color, gradients, tab backgrounds, and glow effects.

Config.colors = {
  primaryColor: "rgb(255, 0, 0)",
  backgroundColor: "rgba(0, 0, 0, 0.6)",
  glowColor: "rgba(212, 22, 22, 0.7)"
}

---

🚨 Troubleshooting

Issue: Loading screen doesn't fade out ✅ Solution: Check transition is enabled & wait time isn't too short.

Issue: Social media links don't open ✅ Solution: Ensure browser popups are allowed and NUI is initialized.

Issue: Conflicts with ESX_Multicharacter ✅ Solution: Disable Config.transition.enabled and trigger manually via exports.

---

📥 Installation

1. Extract into your resources/ folder

2. Add ensure X_Loadingscreen in server.cfg

3. Edit config.lua & config.js for full customization

📥 Download & Support

• Tebex Store: LINK

• Discord Support: HERE