# How to Add a Custom Loading Screen to Your FiveM Server (/docs/fivem/custom-loading-screen)



import { Step, Steps } from 'fumadocs-ui/components/steps';
import { Files, Folder, File } from 'fumadocs-ui/components/files';

The FiveM loading screen is an HTML page displayed while players connect and load assets. You can replace it with a custom design.

Loading Screen Structure [#loading-screen-structure]

<Files>
  <Folder name="my_loadscreen" defaultOpen>
    <File name="fxmanifest.lua" />

    <Folder name="html" defaultOpen>
      <File name="index.html" />

      <File name="style.css" />

      <File name="script.js" />

      <File name="logo.png" />
    </Folder>
  </Folder>
</Files>

Install a Loading Screen [#install-a-loading-screen]

<Steps>
  <Step>
    Create or download a loading screen [#create-or-download-a-loading-screen]

    You can build one from scratch (HTML/CSS/JS) or download a pre-made one from the cfx.re Releases forum.
  </Step>

  <Step>
    Create the fxmanifest.lua [#create-the-fxmanifestlua]

    ```lua
    fx_version 'cerulean'
    game { 'gta5' }

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

    files {
      'html/index.html',
      'html/style.css',
      'html/script.js',
      'html/logo.png'
    }
    ```

    | Directive                          | Description                                                                               |
    | ---------------------------------- | ----------------------------------------------------------------------------------------- |
    | `loadscreen`                       | Path to the HTML file (or a remote URL like `https://example.com/load/`)                  |
    | `loadscreen_cursor 'yes'`          | Enables mouse cursor on the loading screen                                                |
    | `loadscreen_manual_shutdown 'yes'` | Prevents auto-close — requires calling `SHUTDOWN_LOADING_SCREEN_NUI` from a client script |
  </Step>

  <Step>
    Upload to the server [#upload-to-the-server]

    In the [XGamingServer Panel](https://panel.xgamingserver.com), click **Files** in the sidebar and upload the folder to `resources/`.
  </Step>

  <Step>
    Add to server.cfg [#add-to-servercfg]

    ```ini
    ensure my_loadscreen
    ```

    To hide the default loading spinner:

    ```ini
    setr sv_showBusySpinnerOnLoadingScreen false
    ```
  </Step>

  <Step>
    Restart [#restart]

    Start from **Console**. Players see your custom loading screen when connecting.
  </Step>
</Steps>

Loading Progress [#loading-progress]

Your loading screen JavaScript can track load progress:

```javascript
window.addEventListener('message', function(event) {
  if (event.data.eventName === 'loadProgress') {
    // event.data.loadFraction = 0.0 to 1.0
    updateProgressBar(event.data.loadFraction);
  }
});
```

Server handover data is available via `window.nuiHandoverData`.

Related Guides [#related-guides]

* [Server Icon](/docs/fivem/server-icon)
* [Server Configuration](/docs/fivem/configure-your-server)