LoadScreen FiveM - 5bundle.com

Loadscreen moderne et entièrement configurable pour serveurs FiveM / GTA V Roleplay.

Fonctionnalités

• Interface moderne avec design glassmorphism
• Navigation multi-pages fluide
• Lecteur audio intégré avec playlist personnalisable
• Contrôles audio complets (volume, progression, play/pause, skip)
• 8 filtres audio en temps réel
• Système d’onglets configurable :
  • Règlement
  • Nouveautés
  • Touches serveur
  • Équipe / Créateurs
• Liens sociaux intégrés
• Responsive et optimisé
• Animations et transitions fluides
• Configuration centralisée et simple

Pourquoi choisir ce LoadScreen ?

Ce loadscreen a été conçu pour offrir une expérience propre, immersive et professionnelle dès la connexion au serveur.

Grâce à son système entièrement configurable, vous pouvez facilement adapter l’interface à l’identité de votre serveur sans modifier toute la structure du projet.

Le lecteur audio avancé avec filtres en temps réel apporte une vraie immersion pendant le chargement, tandis que les différentes sections permettent d’informer rapidement vos joueurs sur le règlement, les nouveautés ou les touches importantes du serveur.

Configuration

Toute la personnalisation se fait depuis config.js :

• Musiques et playlist
• Filtres audio
• Boutons de navigation
• Règlement
• Touches serveur
• Membres de l’équipe
• Réseaux sociaux
• News et mises à jour
• Animations

Technologies

• HTML5 / CSS3
• JavaScript ES6
• Tailwind CSS
• Howler.js
• Font Awesome
• Compatible FiveM

Inclus

• Loadscreen complet prêt à l’utilisation
• Configuration simplifiée
• Système audio avancé
• Navigation multi-pages
• Animations modernes
• Support des réseaux sociaux
• Documentation de configuration

Installation

1. Placez la ressource dans votre dossier resources
2. Configurez le fichier config.js
3. Ajoutez vos images et musiques
4. Lancez la ressource avec :

ensure loadingscreen

Configuration

Copier
1// zoom / opacity / slide-top / slide-bottom
2const ANIMATIONS_TRANSITION_TYPES = "zoom";
3
4// Configuration des boutons de navigation
5const BUTTONS = [
6  {
7    label: "Réglement",
8    dataPage: "rules",
9    enabled: true,
10  },
11  {
12    label: "Nouveautés",
13    dataPage: "news",
14    enabled: true,
15  },
16  {
17    label: "Touches",
18    dataPage: "admin",
19    enabled: true,
20  },
21  {
22    label: "Créateurs",
23    dataPage: "creators",
24    enabled: true,
25  }
26];
27
28// Configuration des mises à jour
29const UPDATES = [
30  {
31    title: "5bundle.com",
32    date: "31/09/2025",
33    url: "https://5bundle.com"
34  },
35  {
36    title: "5bundle.com",
37    date: "31/08/2025",
38    url: "https://5bundle.com"
39  },
40];
41
42// Configuration des touches du serveur
43const SERVER_KEYS = [
44  {
45    category: "Touches Globales",
46    keys: [
47      {
48        key: ["G"],
49        description: "Ouvrir le téléphone"
50      },
51      {
52        key: ["ALT"],
53        description: "Se coucher au sol"
54      },
55      {
56        key: ["B"],
57        description: "Pointer du doigt"
58      },
59      {
60        key: ["CTRL"],
61        description: "S'accroupir"
62      }
63    ]
64  },
65  {
66    category: "Touches Inventaire",
67    keys: [
68      {
69        key: ["ALT", "I"],
70        description: "Ouvrir l'inventaire"
71      },
72      {
73        key: ["NUM 1, 2, 3, 4, 5"],
74        description: "Utiliser le(s) item(s) de la hotbar"
75      }
76    ]
77  },
78  {
79    category: "Touches Véhicules",
80    keys: [
81      {
82        key: ["NUMPAD 1"],
83        description: "Changer de place en conducteur"
84      },
85      {
86        key: ["NUMPAD 2"],
87        description: "Changer de place en passager"
88      },
89    ]
90  }
91];
92
93// Configuration des liens sociaux
94const SOCIALS_LINKS = [
95  {
96    name: "YouTube",
97    icon: "fa-brands fa-youtube",
98    url: "https://google.com"
99  },
100  {
101    name: "Instagram",
102    icon: "fa-brands fa-instagram",
103    url: "https://google.com"
104  },
105  {
106    name: "TikTok",
107    icon: "fa-brands fa-tiktok",
108    url: "https://google.com"
109  },
110  {
111    name: "Discord",
112    icon: "fa-brands fa-discord",
113    url: "https://google.com"
114  }
115];
116
117// Configuration des profils de l'équipe
118const TEAMS_PROFILS = [
119  {
120    name: "Dako",
121    image: "/images/logo-dako.png",
122    role: "Fondateur",
123    roleColor: "bg-red-700",
124    description: "Développeur principal du serveur, responsable de la majorité du code et de la maintenance."
125  },
126  {
127    name: "Kyzo",
128    image: "/images/logo-kyzo.png",
129    role: "Co-développeur",
130    roleColor: "bg-blue-700",
131    description: "Co-développeur du serveur, responsable de la création de plusieurs fonctionnalités et de l'aide au développement."
132  },
133];
134
135// Configuration des règlements du serveur
136const RULES = [
137  {
138    title: "Réglement de Base du serveur",
139    items: [
140      "Soyez respectueux avec tout le monde. Si quelqu'un vous harcèle, envoyez un MP à un membre du Staff.",
141      "Nous respectons les conditions d'utilisation de Discord vous devez avoir 13 ans ou plus pour utiliser les services Discord.",
142      "Ne spammez pas de texte, d'emotes ou d'images dans les salons textuels..",
143      "N'indiquez pas de messages type NSFW / Pub / Propos Haineux dans le chat ou dans des statuts personnalisés.",
144      "Il s'agit d'un serveur francophone, veuillez ne pas communiquer dans d'autres langues. C'est ainsi que nous pouvons modérer pleinement."
145    ]
146  },
147  {
148    title: "Réglement Discord",
149    items: [
150      "Respectez les conditions d'utilisation de Discord : https://discord.com/terms",
151      "Ne pas partager de contenu à caractère sexuel, violent ou choquant.",
152      "Ne pas harceler, menacer ou intimider les autres utilisateurs.",
153      "Ne pas partager d'informations personnelles ou sensibles.",
154      "Ne pas utiliser de langage haineux, discriminatoire ou offensant.",
155      "Ne pas promouvoir ou encourager des activités illégales."
156    ]
157  }
158];
159
160// Configuration de la playlist
161const MusicConfig = {
162  playlist: [
163    {
164      name: "ZZ & Timar - Indecis",
165      file: "ZZ-Timar-indecis.mp3",
166      link: "https://youtu.be/bFebsX9GboQ?si=KK37JojdOwXiacOP"
167    },
168    {
169      name: "Sheu - Solvable",
170      file: "sheu-solvable.mp3",
171      link: "https://youtu.be/W95Ff2OkTNY?si=BxRrFSfpzHn2H9n7"
172    },
173    {
174      name: "ZZ - 171123",
175      file: "ZZ-171123.mp3",
176      link: "https://youtu.be/wgNct4PJ81c?si=jGTBE5Jmt_THoK6z"
177    },
178  ],
179
180  // Préconfigurations des filtres audio
181  audioFilters: {
182    normal: {
183      name: "Normal",
184      icon: "fa-music",
185      enabled: false
186    },
187    lowpass: {
188      name: "Étouffé",
189      icon: "fa-volume-low",
190      type: "lowpass",
191      frequency: 800,
192      Q: 1,
193      enabled: true
194    },
195    highpass: {
196      name: "Radio",
197      icon: "fa-radio",
198      type: "highpass",
199      frequency: 1200,
200      Q: 1,
201      enabled: true
202    },
203    bandpass: {
204      name: "Téléphone",
205      icon: "fa-phone",
206      type: "bandpass",
207      frequency: 1000,
208      Q: 5,
209      enabled: true
210    },
211    bass_boost: {
212      name: "Bass Boost",
213      icon: "fa-drum",
214      type: "lowshelf",
215      frequency: 200,
216      gain: 10,
217      enabled: true
218    },
219    treble_boost: {
220      name: "Aigus+",
221      icon: "fa-headphones",
222      type: "highshelf",
223      frequency: 3000,
224      gain: 8,
225      enabled: true
226    },
227    underwater: {
228      name: "Sous l'eau",
229      icon: "fa-water",
230      type: "lowpass",
231      frequency: 400,
232      Q: 0.5,
233      enabled: true
234    },
235    cave: {
236      name: "Cave",
237      icon: "fa-mountain",
238      type: "peaking",
239      frequency: 800,
240      Q: 2,
241      gain: -6,
242      enabled: true
243    }
244  }
245};
246