> For the complete documentation index, see [llms.txt](https://x1studios.gitbook.io/x1studios-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://x1studios.gitbook.io/x1studios-docs/loading-screen/documentation.md). # Documentation ## X1Studios Loading Screen ### Overview The **X1Studios Loading Screen** provides a clean, modern, and immersive loading experience for FiveM servers. Designed to improve your server's first impression, the loading screen combines a **red-themed glass-style interface**, glowing panels, animated elements, dynamic backgrounds, social links, and an integrated music player. The system is built with performance and customization in mind, allowing server owners to quickly update important information through a centralized `config.js` file. Whether you're running a roleplay server, community server, or development server, the X1Studios Advanced Loading Screen provides a professional interface for players while they wait to load into your server. *** ## Features ### Modern Red-Themed UI The loading screen features a modern red-themed interface with glowing accents and glass-style panels. The design includes: * Glowing UI elements * Glass-style panels * Red accent lighting * Modern typography * Clean information layout * Animated interface elements The overall design is intended to look polished while remaining visually comfortable during the loading process. *** ## Animated Loading Bar A dynamic loading section is displayed in the center of the screen. The animated progress bar provides players with visual feedback while the server loads. The loading area is designed to remain prominent without taking attention away from the rest of the interface. *** ## Dynamic Background Slideshow The loading screen supports multiple background images through a built-in slideshow system. Server owners can configure multiple images to rotate through during the loading experience. This can be used to showcase: * Server screenshots * Custom vehicles * Community events * Server locations * Development previews * Promotional artwork * Custom graphics Background images can be configured without needing to modify the core loading screen files. *** ## Custom Staff List The loading screen includes a configurable staff section. Server owners can add their staff members through the configuration file. This can be used to display information such as: * Staff names * Developers * Owners * Management * Administration * Other team members The staff list provides players with a quick introduction to the people behind the server. *** ## Social Media Links The loading screen includes clickable social media buttons. Supported links include: * Discord * YouTube * Website When a player selects a social link, the associated page opens directly in their browser. This provides an easy way for players to connect with your community while loading into the server. *** ## Built-In Music Player The loading screen includes an integrated music player that allows players to listen to music while the server loads. The music player includes: * Play * Pause * Volume adjustment * Audio controls This provides an optional entertainment feature while players wait for the loading process to complete. *** ## Glass-Style Interface The loading screen uses a modern glass-style visual design. Panels use translucent styling combined with red glow accents to create a polished interface without overwhelming the player. The layout includes: * Left information panel * Center loading section * Right information panel * Bottom social interface * Music controls *** ## Config-Based Customization Important loading screen settings are managed through a centralized: ``` config.js ``` This allows server owners to customize the loading screen without needing to edit multiple HTML, CSS, or JavaScript files. Depending on the version, configurable information may include: * Staff members * Discord URL * YouTube URL * Website URL * Background images * Music * Other loading screen settings *** ## Easy Background Management Background images can be added to the loading screen's configured image list. This makes it easy to change the visual theme of your loading screen whenever you want. For example, you could use different backgrounds for: * Server updates * Seasonal events * New vehicle releases * Community events * Special announcements *** ## Optimized For FiveM The loading screen is designed specifically for FiveM and is optimized to provide a smooth loading experience. The system avoids unnecessary external dependencies and uses a straightforward resource structure. *** ## Standalone The X1Studios Advanced FiveM Loading Screen is completely standalone. It does not require: * QBCore * QBox * ESX * ox\_lib * PMA-Voice * Any other FiveM framework The loading screen can be installed on virtually any FiveM server. *** ## Layout The default layout consists of several major sections. #### Left Panel Used for configurable server or staff information. #### Center Contains the primary loading section and animated progress bar. #### Right Panel Provides additional configurable information. #### Bottom Interface Contains social media links and music controls. *** ## Customization The loading screen is designed so server owners can customize the most important information without changing the core UI. The primary configuration file is: ``` config.js ``` It is recommended to make a backup of the original configuration before making significant changes. *** ## Requirements #### Required Dependencies **Nothing.** The X1Studios Loading Screen is: * Fully standalone * Framework independent * Dependency free * Ready for FiveM *** ## Compatibility The loading screen is compatible with FiveM servers using: * Standalone * QBCore * QBox * ESX * vMenu * Custom frameworks * Development servers No framework integration is required. *** ## Preview Watch the loading screen in action: **YouTube Preview** *** ## Support For support with the X1Studios Loading Screen, open a support ticket in the official X1Studios Discord. **Support is provided through Discord tickets only.** #### X1Studios Discord *** ## Community Join the X1Studios Discord for: * Upcoming FiveM scripts * Free FiveM EUP packs * Custom liveries * Development previews * New releases * Updates * Support **X1Studios Discord** --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://x1studios.gitbook.io/x1studios-docs/loading-screen/documentation.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.