> For the complete documentation index, see [llms.txt](https://bedoflexdev.gitbook.io/development/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bedoflexdev.gitbook.io/development/scripts/bedoflex-loading.md). # bedoflex Loading bedoflex-loading Documentation A modern, fully configurable loading screen for FiveM with image, slideshow, video and YouTube backgrounds, a music player, info panels, a 3D gallery, seasonal effects and player-side settings. {% embed url="" %} **Buy on Tebex :** [**https://bedoflexdev.tebex.io/package/7742139**](https://bedoflexdev.tebex.io/package/7742139) ## ------FEATURES------ * **Backgrounds.** Image, slideshow with a slow Ken Burns zoom, video playlist (local or hosted) or YouTube. YouTube streams in the highest available quality with subtitles turned off. * **Audio.** Play a music playlist or the background video's own sound. Players can switch between them in settings. * **Music player.** Cover, title, artist, seek bar, volume, visualizer, playlist view, shuffle and repeat modes. Available in two styles: a card or a slim bar at the top that opens on hover. * **Real loading progress.** Progress follows FiveM's real loading stages (map, data files, session) and shows a segmented bar or a ring, the current stage (1 of 5), elapsed time and rotating tips. * **Info panels.** News, Gallery (3D carousel with a fullscreen viewer), Rules, Keybinds, Staff (grouped by category), FAQ and an Arcade mini game (Snake). Choose which tabs are shown and their order. * **News ticker.** Your news titles scroll in a broadcast style strip at the bottom of the screen. * **Effects.** Embers, snow, rain, dust, stars, leaves, petals and fireflies, or automatic seasonal effects. Particles react to the mouse, a trail follows the cursor, and a custom cursor is optional. * **Player settings.** Volume, sound source, color presets, wallpaper, particles, cursor effects, visualizer, reduced motion and auto-hide. Every choice is remembered. * **Server info.** Live player count, live Discord member count, an event countdown, social links and a personal welcome message with the player's name. * **Layouts.** `split`, `centered` and `minimal`, with fully customizable colors, fonts, corner radius, glass effect and scale. Fonts are included, no internet font loading needed. * **Smooth closing.** Picture and sound fade out when the player joins. Works with multicharacter scripts. * **Languages.** English, Turkish, German, French and Spanish. * **Standalone.** Works with any framework (Qbox, QBCore, ESX, ox\_core) or none. ## ------REQUIREMENTS------ | Requirement | Note | | ------------ | ------------------------------- | | FiveM server | Any recent build | | Framework | Not required - works standalone | ## ------INSTALLATION------ ## STEP 1 - Unzip The Folder Unzip the script folder, then copy or cut everything inside it and paste it into your server resources folder. ## STEP 2 - Add Script To Server Add the script to your server config: ``` ensure bedoflex-loading ``` Remove or stop any other loading screen resource. Only one loading screen can run at a time. **NOTE: Please don't change the script name or folder name.** ## STEP 3 - Script Configuration (`config/config.lua`) Every media field (logo, images, videos, music, covers, avatars) accepts a file inside the resource, such as `media/images/background.jpg`, or a direct web link, such as `https://...`. Put local files in `media/images`, `media/music` or `media/videos`. {% hint style="info" %} The loading screen resource is downloaded **before** it is shown. Local videos larger than about 25 MB delay the screen, so host big videos on a CDN (FiveManage, R2...) and paste the link instead. {% endhint %} ### STEP 3.1 - Branding & Theme ```lua Config.Locale = "en" -- en, tr, de, fr, es Config.Server = { Name = "My Server", Tagline = "Serious Roleplay", Logo = "media/images/logo.png", ShowPlayerCount = true, WelcomePlayer = true, -- "Welcome, " } Config.Theme = { Layout = "split", -- "split" | "centered" | "minimal" Accent = "#e5262f", Font = "Barlow", -- built in: Barlow, Barlow Condensed, JetBrains Mono (any other name loads from Google Fonts) DisplayFont = "Barlow Condensed", -- titles, numbers and labels Radius = 2, -- corner roundness in px (0 = sharp) PlayerStyle = "card", -- music player: "card" | "island" (slim bar at the top) ProgressStyle = "bar", -- "bar" | "ring" Cursor = "dot", -- "default" | "dot" | image path AccentPresets = { "#e5262f", "#3b82f6", "#22c55e", "#a855f7" }, -- colors players can pick ({} = off) } ``` ### STEP 3.2 - Background ```lua Config.Background = { Type = "video", -- "image" | "slideshow" | "video" | "youtube" Images = { "media/images/background.jpg" }, Videos = { "https://r2.fivemanage.com/xxxx/background.mp4" }, YouTube = { Id = "", Start = 0, Quality = "max", Zoom = 1.02 }, PlayerWallpapers = true, -- players can pick one of the Images as their wallpaper Dim = 0.35, Blur = 0, Vignette = true, Grain = true, } ``` If the video or YouTube background cannot be played, the screen falls back to your images automatically. ### STEP 3.3 - Audio ```lua Config.Audio = { Source = "music", -- "music" | "background" (video / YouTube sound) | "none" AllowPlayerSwitch = true, Volume = 0.35, Shuffle = true, Repeat = "all", -- "all" | "one" | "off" Playlist = { { title = "Night Drive", artist = "Artist", file = "media/music/track1.mp3", cover = "media/images/cover1.jpg" }, }, } ``` ### STEP 3.4 - Effects ```lua Config.Effects = { Particles = "auto", -- "none" | "auto" | "embers" | "snow" | "rain" | "dust" | "stars" | "leaves" | "petals" | "fireflies" Amount = 70, MouseInteraction = true, CursorTrail = true, } ``` `auto` changes with the season: snow in winter, petals in spring, fireflies in summer and leaves in autumn. ### STEP 3.5 - Panels ```lua Config.Panels = { Order = { "news", "gallery", "rules", "keybinds", "staff", "faq", "arcade" }, Default = "news", } ``` Remove a name from `Order` to hide that tab. The content of each tab is set in `Config.News`, `Config.Gallery`, `Config.Rules`, `Config.Keybinds`, `Config.Staff` and `Config.FAQ`. The news titles are also shown in the ticker at the bottom of the screen. ### STEP 3.6 - Socials, Discord & Countdown ```lua Config.Socials = { { type = "discord", label = "Discord", url = "https://discord.gg/yourinvite" }, { type = "store", label = "Store", url = "https://yourstore.tebex.io" }, } Config.Discord = { InviteCode = "yourinvite" } -- live member / online count Config.Countdown = { Enabled = true, Label = "Season 3", Date = "2026-11-01 20:00" } ``` Social types: `discord`, `website`, `store`, `youtube`, `tiktok`, `instagram`, `x`, `twitch`, `github`, `custom`. ### STEP 3.7 - Closing The Loading Screen ```lua Config.Shutdown = { Mode = "session", -- "session" | "spawn" | "manual" FadeOut = 1500, Timeout = 120, } ``` | Mode | Closes when | | --------- | --------------------------------------------------------------------------------- | | `session` | The player joins the session. Best for most multicharacter scripts | | `spawn` | The player spawns or the framework player is loaded (Qbox, QBCore, ESX, ox\_core) | | `manual` | Another resource calls the export or event (see EXPORTS) | ## STEP 4 - YouTube Background (Optional) Set the background type to `youtube` and paste the video id. No extra setup is needed. ```lua Config.Background.Type = "youtube" Config.Background.YouTube.Id = "VIDEO_ID" -- from youtube.com/watch?v=VIDEO_ID ``` Use `Config.Audio.Source = "background"` to play the video's own sound. The video player is served by the resource itself through your server's web address (`web_baseUrl`). FiveM sets it automatically when the server runs with a license key. {% hint style="warning" %} Some videos have embedding disabled by their owner and cannot play anywhere outside YouTube. If a video has subtitles or black bars burned into the picture, raise `YouTube.Zoom` (for example `1.25`) to crop them out. A hosted mp4 / webm video is always the most reliable option. {% endhint %} ## STEP 5 - Start The Server Restart your server. The console will print: ``` [bedoflex-loading] v1.0 started (background: video, audio: music, layout: split) ``` Config mistakes are reported in the console in yellow, with the value that was used instead. ## ------PLAYER CONTROLS------ | Key | Action | | --------- | ------------------------------------------ | | `SPACE` | Play / pause the music | | `M` | Mute | | `←` / `→` | Previous / next track | | `H` | Hide the interface to enjoy the background | | `ESC` | Close menus and the gallery viewer | The settings button in the top right lets players change volume, sound source, color, wallpaper and effects. The interface also hides itself after a while without input (`Config.Idle`). ## ------EXPORTS------ **Client** ```lua exports["bedoflex-loading"]:Shutdown() -- fade out and close the loading screen exports["bedoflex-loading"]:IsActive() -- true while the loading screen is open TriggerEvent("bedoflex-loading:shutdown") -- same as Shutdown() ``` ## ------EDITABLE FILES------ | File | Purpose | | ------------------- | ----------------------------------- | | `config/config.lua` | Every setting and all panel content | | `locales/*.lua` | All texts of the interface | | `media/` | Your logo, images, music and videos | ## ------FAQ------ **The loading screen closes too early or too late.** Change `Config.Shutdown.Mode`. If your multicharacter script should decide, use `manual` and call `exports["bedoflex-loading"]:Shutdown()` when the character selection opens. **The YouTube background doesn't play.** Check the server console: if it says `web_baseUrl is not set`, the server has no license key web address and YouTube can't be served. Otherwise the video owner has probably disabled embedding. Try another video, or upload the video as mp4 / webm and use `Type = "video"`. **The video has no sound.** Set `Config.Audio.Source = "background"`. Players can also switch the sound source in settings. **The loading screen takes long to appear.** Your local video or music files are too big. Host them on a CDN and use the link instead. ## INFOS **Tebex :** [**https://bedoflexdev.tebex.io/package/7742139**](https://bedoflexdev.tebex.io/package/7742139) **Discord :** [**https://bedoflexdev.net/discord**](https://bedoflexdev.net/discord)