Syra_LoadingScreen - Custom FiveM Loading Screen

Syra_LoadingScreen is a fully customizable HTML/CSS/JS loading screen for FiveM, designed to give your server a polished first impression before players enter the game.

It supports image backgrounds, slideshows, local video backgrounds, YouTube backgrounds, background music, particles, server branding and a clean audio player.

The resource is made to work as a standalone loading screen, with recommended integration alongside Syra_Multichars for manual shutdown after character selection.

Key Features

• 🎬 Video background support: Use local `.webm` videos as a full-screen animated background.

• 🖼️ Image and slideshow mode: Display one image or cycle through multiple images with smooth transitions.

• ▶️ YouTube background option: Use a muted looping YouTube video as the loading screen background.

• 🎵 Background music system: Play local music tracks with autoplay, volume control and optional shuffle.

• 🎧 Built-in music player: Show or hide the audio player panel depending on your server style.

• ✨ Particle overlay: Add animated particles with configurable count, color, size, opacity, shape and movement.

• 🖱️ Custom cursor: Enable a custom loading screen cursor with configurable image and size.

• 🏷️ Server branding: Display server name, optional logo, loading text and accent color.

• 📊 Loading bar: Optional progress bar with configurable accent color.

• ⚙️ Easy configuration: All major visuals and behavior are managed from `config.js`.

Technical Information

• Framework : Standalone

• Code is accessible : No (Partially)

• Subscription-based : No

• Lines : 3600

• Requirements : None

• Support : Yes

• Locales : EN