ALX Loading Screen 🚀

An elegant, modern, and highly customizable loading screen for FiveM servers. Designed to provide a premium visual experience from the moment your players join the server.

---

✨ Features

• 🎨 Modern Design: Clean interface with smooth animations and minimalist aesthetics.
• 📹 Multifunctional Background: Supports local video (.mp4), YouTube videos, or static images.
• 🎵 Audio System: Background music support with configurable initial volume.
• 🌈 Full Customization: Change primary colors, background effects (blur, brightness, contrast), and texts from a single file.
• 👥 Team Section: Showcase your developers or staff with avatars and roles.
• 💡 Dynamic Tips: Random tip system to keep your players informed.
• 🔗 Social Links: Direct links to Discord, Instagram, YouTube, and more.
• 🎬 Transition Animation: Includes the classic GTA V style camera animation upon load completion.

---

📸 Showcase

Experience the sleek design and fluid animations of the ALX Loading Screen:

🎥 Video Preview

Click the image above to watch the full showcase video.

---

🛠️ Installation

1. Download the repository or resource files.
2. Extract the alx_loading folder into your resources directory.
3. Ensure the folder name is exactly alx_loading.
4. Add ensure alx_loading to your server.cfg file.

---

⚙️ Configuration

All visual configuration is located in nui/assets/js/config.js. No advanced coding knowledge is required.

window.Config = {
  // Server info
  serverName: "<strong>ALX</strong> ROLEPLAY",
  serverTagline: "Where your story begins",
  serverDescription: "Welcome to ALX Roleplay! Experience a unique and immersive roleplay environment with custom scripts, a realistic economy, and a friendly community. Create your character and start your legitimate or criminal career today.",

  // Time to wait before showing the UI (in ms), while the background plays
  uiDelay: 2800,

  // Social links (leave empty string to hide)
  socials: {
    discord: "https://discord.gg/yourdiscord",
    instagram: "",
    youtube: "",
    x: "",
    tiktok: "",
    facebook: "",
    twitch: "",
    github: ""
  },

  // Developers list
  team: [
    { name: "ALX", role: "Lead Developer", avatar: "./public/img/alx.png", verified: true },
  ],

  // Loading tips (shown randomly)
  tips: [
    "Always stay in character (IC) while in the server.",
    "Use /me and /do to describe actions and enhance roleplay.",
    "Respect the staff team and fellow players.",
    "Join our Discord to read the full rulebook and changelogs.",
    "Metagaming (using OOC info IC) is strictly prohibited.",
    "Press T to open the chat window.",
    "Report bugs or issues on our Discord tracker."
  ],

  video: {
    enabled: true,
    file: "./public/video/loading.mp4",
    defaultVolume: 15,
    startAt: 9,
    mute: false
  },

  // YouTube Background
  youtube: {
    enabled: false,
    videoId: "kZI1zPZU1O8", // Default background video
    startAt: 0,
    mute: false
  },

  // Audio settings
  audio: {
    enabled: false,
    file: "./public/sounds/audio.mp3",
    defaultVolume: 15,
  },

  // Background image if video and youtube is disabled
  background: "./public/img/background.webp",

  // Background Visual Effects
  effects: {
    blur: 0, // px (blur amount)
    opacity: 0.6, // 0-1 (background opacity)
    grayscale: 0, // 0-1 (1 = black & white)
    brightness: 0.7, // 0-2 (brightness factor)
    contrast: 1.0, // 0-2 (contrast factor)
    saturate: 1.1, // 0-2 (saturation factor)
    sepia: 0, // 0-1
    invert: 0 // 0-1
  },

  // Color settings
  colors: {
    primary: "#00fe6c" // Hex color (Default: Light Blue)
  },

  // Custom Titles
  titles: {
    team: "Our Team",
    song: "Ice Cold - Letoa" // Set to empty string to get the title from youtube in case of youtube enabled
  },

  loadingMessages: [
    { threshold: 0, message: 'Initializing' },
    { threshold: 10, message: 'Loading game assets' },
    { threshold: 20, message: 'Connecting to server' },
    { threshold: 30, message: 'Loading world data' },
    { threshold: 40, message: 'Preparing vehicles' },
    { threshold: 50, message: 'Loading scripts' },
    { threshold: 60, message: 'Synchronizing data' },
    { threshold: 70, message: 'Loading textures' },
    { threshold: 80, message: 'Almost there' },
    { threshold: 90, message: 'Finishing up' },
    { threshold: 95, message: 'Get ready to play' },
  ]
};

For the server entry player-switch animation, you can configure it in config/config.lua.

---

📄 License and Usage

This resource is completely free.

It is licensed under Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0).

• You are free to share and adapt the material.
• You must give appropriate credit to the original author.
• Commercial use is strictly prohibited.

Please refer to the LICENSE file for full details.

---

🌐 Support & More

For support, premium scripts, and more, contact me via Discord: https://discord.gg/alxscripts

Developed with ❤️ by ALX Scripts