Custom Loading Screen by donkfivem

A modern, feature-rich custom loading screen for FiveM servers with an integrated music player and video backgrounds.

Features

• Interactive Music Player - Built-in audio player with play/pause, skip, and volume controls
• Video Backgrounds - Dynamic video backgrounds that change with each song
• Progress Bar - Real-time loading progress indicator
• Social Links - Quick access to Discord and store links
• Keyboard Controls - Spacebar to play/pause music
• Random Start Track - Automatically plays a random song on each load
• Time Display - Current track time display

Installation

1. Download or clone this repository
2. Place the donk_loadingscreen folder in your FiveM server's resources directory
3. Add ensure donk_loadingscreen to your server.cfg
4. Restart your server

Configuration

Adding Custom Songs

Edit the songs array in html/main.js to add your own tracks:

const songs = [
    {
        name: 'Song Name',
        artist: 'Artist Name',
        song: 'assets/audio/your-song.mp3',
        image: 'assets/images/your-image.png',
        youtube: 'https://your-video-url.mp4' // Optional background video
    },
];

Customizing Links

Update the Discord and store links in html/main.js:

document.getElementById("discord").onclick = function () {
    openLink('https://discord.gg/your-server');
};

document.getElementById("store").onclick = function () {
    openLink('https://your-store.tebex.io/');
};

Styling

Modify html/style.css to customize the appearance of the loading screen to match your server's branding.

File Structure

donk_loadingscreen/
├── fxmanifest.lua
├── html/
│   ├── index.html
│   ├── style.css
│   ├── main.js
│   └── assets/
│       ├── logo.png
│       ├── loading.png
│       ├── discord.svg
│       ├── store.svg
│       ├── audio/
│       │   └── [your music files]
│       └── images/
│           └── [your image files]

Controls

• Play/Pause: Click the play/pause button or press Spacebar
• Next Track: Click the forward button
• Previous Track: Click the backward button
• Volume: Adjust the volume slider

Requirements

• FiveM Server
• Basic understanding of HTML/CSS/JavaScript for customization

Credits

Author: donk Version: 1.6

Support

For issues, questions, or suggestions, please open an issue on GitHub.

License

This project is open source and available for use in your FiveM server.