<!-- fivemad.com, Markdown source of https://fivemad.com/redm/docs/tools/loading-screen -->
> Source: https://fivemad.com/redm/docs/tools/loading-screen
> Section: Tools
> Tags: loadscreen, loading screen, loadProgress, onLogLine, NUI, ShutdownLoadingScreen, fxmanifest
> Tool: https://fivemad.com/redm/tools/loading-screen
> Last updated: 2026-10-01
> Site map for assistants: https://fivemad.com/redm/llms.txt

# Loading Screen Generator

Make a RedM loading screen resource with your title, tips, background image or video and music, a real progress bar and log line, downloaded as a zip.

The Loading Screen Generator builds the page players see while they join your RedM server, and wraps it in a resource you can drop into `resources`. You set the text, the background and the music, watch it in a live preview, and download a zip. The files you pick never leave your browser: they are packed into the zip on your machine.

## What it is for

A loading screen is a small web page inside a resource, plus a few manifest lines that tell RedM to show it. Most people grab a template and spend an hour on the HTML. Here the page is written for you, the progress bar is wired to the real loading events instead of a timer, and the manifest is already right for RedM.

## Quick start

1. Under **Text**, set the **Title**, the **Subtitle** and the **Tips** (one per line).
2. Under **Background**, pick **Plain colour**, **Image** or **Video**. For an image or video press **Pick image** or **Pick video**.
3. Optional: turn on **Play music** and **Pick music**.
4. Check the preview on the right. The bar and the log line move on their own there.
5. Set the **Resource name** and press **Download resource**.
6. Unzip into `resources`, add `ensure <resource name>` to `server.cfg` and restart the server.

> [!WARNING]
> Only one loading screen can be active. Stop or remove any other resource with a `loadscreen` line, such as the `loadingscreen` resource the VORP recipe starts.

## Options

### Text

| Option | What it does | Default |
| --- | --- | --- |
| **Title** | Big heading, shown in capitals. | `My RedM Server` |
| **Subtitle** | Line under the title. Empty hides it. | `Western roleplay` |
| **Tips** | One per line. They rotate under the title, with a fade between them. | two example lines |
| **Seconds per tip** | How long each tip stays, 2 to 30. | 8 |
| **Layout** | **Bottom left** or **Bottom centre**. | Bottom left |

**Reset** in the **Text** panel puts every setting back to the defaults.

### Background

| Option | What it does | Default |
| --- | --- | --- |
| **Plain colour** / **Image** / **Video** | What sits behind the text. Switching type drops the file you picked. | Plain colour |
| **Pick image** | PNG, JPEG, WebP or GIF. Covers the screen. | |
| **Pick video** | WebM or MP4. Plays muted and loops. | |
| **Colour** | The page colour, and what shows while a picture loads. | `#1b140e` |
| **Accent** | Colour of the progress bar fill. | `#c8a26a` |
| **Darken** | A dark gradient over the background so the text stays readable, 0 to 90%. | 35% |

### Music

| Option | What it does | Default |
| --- | --- | --- |
| **Play music** | Ship an audio file in the resource and play it on a loop. | off |
| **Pick music** | MP3, OGG or WAV. | |
| **Volume** | 0 to 100%. | 40% |
| **Mute button** | A **Mute** / **Unmute** button in the top right. | on |

### Loading and resource

| Option | What it does | Default |
| --- | --- | --- |
| **Progress bar** | A bar and a percentage, filled from the game's `loadProgress` event. | on |
| **Log line** | The latest `onLogLine` message under the bar. | on |
| **Show the cursor** | Adds `loadscreen_cursor 'yes'`. Needed for the mute button to be clickable. | on |
| **Close it on spawn** | Adds `loadscreen_manual_shutdown 'yes'` and a `client.lua` that closes the screen on `playerSpawned`. | on |
| **Resource name** | Folder and zip name. Anything that is not a letter, digit, `_` or `-` becomes `_`. | `my_loadscreen` |

Your settings are saved in your browser. The picked image, video and music files are not, so pick them again after a reload.

## What is in the zip

```
my_loadscreen/
  fxmanifest.lua
  client.lua            (only with Close it on spawn)
  html/
    index.html
    <your background>   (if you picked one)
    <your music>        (if you picked one)
```

Media file names are cleaned up on the way in: anything that is not a letter, digit, `_` or `-` becomes `_`, and the name is cut to 40 characters before the extension. The chips above the code show **fxmanifest.lua**, **html/index.html** and **client.lua** as they will be written.

With the default settings the manifest is:

```lua title="fxmanifest.lua"
fx_version 'cerulean'
game 'rdr3'
rdr3_warning 'I acknowledge that this is a prerelease build of RedM, and I am aware my resources *will* become incompatible once RedM ships.'

name 'my_loadscreen'
description 'Loading screen made with fivemad.com/redm/tools/loading-screen'

loadscreen 'html/index.html'
loadscreen_cursor 'yes'
loadscreen_manual_shutdown 'yes'

client_script 'client.lua'

files {
    'html/index.html',
}
```

A picked background or music file is added to `files` as `html/<name>`.

## Closing the screen

With **Close it on spawn** on, the resource keeps the screen up until the player has spawned, then closes it:

```lua title="client.lua"
-- Generated with fivemad.com/redm/tools/loading-screen
-- loadscreen_manual_shutdown is on, so this resource ends the loading screen itself once the
-- player has spawned (spawnmanager fires playerSpawned).
AddEventHandler('playerSpawned', function()
    ShutdownLoadingScreen()
    ShutdownLoadingScreenNui()
end)
```

`playerSpawned` comes from `spawnmanager`, which the default RedM recipe starts. If your framework spawns the player after a character select instead, change the event in `client.lua` to the one your framework fires at that point.

With it off, there is no `client.lua` and no manual shutdown line in the manifest, so the resource does not close the screen itself.

## The preview

The preview on the right is the real `index.html`, with your files loaded from your machine. Because nothing is loading in a browser, the preview adds a fake progress stream and a placeholder log line so you can see the bar move. That extra script is not in the downloaded file; in game RedM sends the real events.

## Size

Every file in the resource is downloaded by every player before the screen can show, so a big video means a long black screen first. The page warns you when the background is over 40 MB or the music is over 15 MB. A single image, or a short compressed WebM, is the safe choice.

## Tips

- Keep tips short. The tip line wraps at about 60 characters, so a long tip turns into a paragraph.
- Use **Darken** rather than editing your picture when the text is hard to read.
- Leave **Show the cursor** on if you keep the mute button, or players cannot click it.

## Common mistakes

- **The old loading screen still shows.** Another resource with a `loadscreen` line is running. Remove it from `server.cfg`.
- **The screen never closes.** **Close it on spawn** is on but nothing fires `playerSpawned` (for example `spawnmanager` is not started). Start it, or change the event in `client.lua`.
- **Only the plain colour shows.** You switched the background type after picking a file, or reloaded the page, and the file was dropped. The warning panel under the preview says "Pick a background image or switch to a plain colour" when that happens. Pick the file again before you download.

## Limitations

- The page starts the music itself and tries again on the first click if it was blocked. Whether a given client plays it before any click is up to RedM, not the page.
- The text styling is fixed: a serif font, the layout above, your colours. For anything else, edit `html/index.html` after you download.
- The page cannot run RDR2, so the in-game result is not something it can show you exactly.

## Related tools

- [server.cfg Generator](/redm/docs/tools/server-cfg-generator)
- [Resource Conflict Checker](/redm/docs/tools/resource-conflicts)
- [Photo Mode Converter](/redm/docs/tools/photo-converter)