Flake Loading Screen

Overview

Flake Loading Screen replaces the default FiveM loading screen with a sleek, media-rich experience. It supports background videos (MP4 or YouTube), background music with volume control, server branding, rules, staff cards, and social media links — all configurable through a single JavaScript file.

Features

• Background Videos — Play MP4s or YouTube videos behind the loading UI.
• Audio Control — Volume slider and skip-song button for video audio.
• Server Branding — Custom title, subtitle, and accent colour.
• Server Info & Rules — Editable info blocks and rule list.
• Staff Showcase — Display team members with avatars and roles.
• Social Links — Discord, Website, YouTube, or any custom link.
• Localization — Customize all UI text strings.

Installation

Step 1 — Drop the Resource

Place the flake_loading folder into your server's resources directory and add to server.cfg:

Step 2 — Verify Loadscreen Entry

The fxmanifest.lua already points to the correct HTML file. No changes are needed unless you rename the web/build folder.

File Structure

flake_loading/
├── web/build/
│   ├── index.html  -- Main loading screen HTML
│   ├── config.js   -- All settings (edit this)
│   ├── css/        -- Stylesheets
│   ├── js/         -- Application logic
│   └── font/       -- Custom fonts
├── client/
│   └── main.lua
├── server/
│   └── main.lua
└── fxmanifest.lua

Video & Music

The loading screen supports two types of background media: MP4 files (recommended) and YouTube videos. MP4s allow full volume control; YouTube videos have restricted controls due to platform limitations.

Uploading Your Media

We recommend using Five Manage for fast, reliable video hosting:

1. Create a Five Manage account at fivemanage.com.
2. Go to the API Tokens section and create a token for Media.
3. Head to the Upload section and upload your MP4 videos or music files.
4. Copy the direct file URL (ends in .mp4) and paste it into config.js.

Adding MP4 Videos

"videos": [
  "https://r2.fivemanage.com/your-account/video1.mp4",
  "https://r2.fivemanage.com/your-account/video2.mp4"
]

YouTube Videos

YouTube links are supported but volume cannot be controlled due to API restrictions. Paste a standard watch or share URL:

"videos": [
  "https://www.youtube.com/watch?v=VIDEO_ID",
  "https://youtu.be/VIDEO_ID"
]

Default Volume

"default_volume": 30

Configuration

All settings are in web/build/config.js. No server restart is required — changes apply on next client connect.

Accent Colour

"UIColor": "#81d0fdff"

Title & Subtitle

"Title": {
  "enable": true,
  "title": "Flake Development",
  "subtitle": "Windy City Inspired Loading"
}

Server Information

"ServerInformation": {
  "enable": true,
  "title": "YOUR SERVER NAME",
  "subtitle": "",
  "infos": [
    {"info": "Content based roleplay server! Please read the rules..."}
  ]
}

Server Rules

"ServerRules": {
  "enable": true,
  "title": "SERVER RULES",
  "rules": [
    {"title": "Rule: 1", "description": "Stay In Character at all times."},
    {"title": "Rule: 2", "description": "Leave discord calls before loading in."}
  ]
}

Staff Members

"Staff": {
  "enable": true,
  "title": "STAFF",
  "members": [
    {
      "name": "Flake",
      "role": "Owner",
      "avatar": "https://cdn.discordapp.com/attachments/.../logo.png"
    }
  ]
}

Social Media

"SocialMedia": {
  "enable": true,
  "socials": [
    {
      "label": "Discord",
      "link": "https://discord.gg/flakedev",
      "icon": "fab fa-discord",
      "color": "linear-gradient(125.11deg, #5c8ed0 29.36%, #5c8ed0 90.83%)"
    }
  ]
}

Localization

"Locales": {
  "Welcome": "WELCOME TO FLAKE DEVELOPMENT",
  "Sound": "Volume",
  "Loading": "Loading in progress, please wait...",
  "Skip": "Skip Song"
}

Troubleshooting