Skip to content Nodecraft

How to Install a Loading Screen on a FiveM Server

Support / FiveM / Resources / How to Install a Loading Screen on a FiveM Server
FiveM Icon
Create a FiveM Server today!
Start Free Trial

A custom loading screen makes your FiveM server stand out by creating a unique experience as players connect. Adding custom images, music, and server details helps set the tone and gives players useful information while they load in. Follow these steps to set up a custom loading screen for your server.

Note: Be sure that your FiveM server is fully stopped before making any configuration changes or setting updates!

Download or Create a Loading Screen Resource

  1. Visit a website like:

  2. Download a FiveM-compatible loading screen.

  3. Ensure the folder contains index.html, style.css, and a config.lua or fxmanifest.lua file.

  4. If creating your own, prepare HTML, CSS, and JavaScript files for a custom design.

Add the Loading Screen to Your Server

  1. Navigate to the Server Files tab in the Nodecraft Control Panel.

  2. Open the resources folder.

  3. Create a new folder and name it loadscreen.
    Creating the custom loadscreen folder for a FiveM server

  4. Upload loading screen files into the loadscreen folder you created.
    Uploading the loading screen files for a FiveM server

Add the Loading Screen to server.cfg

  1. Open server.cfg (found in your FiveM server directory).

  2. Add the following line:

    ensure loadscreen

  3. Save the file.
    Ensuring the custom loading screen for a FiveM server in the server.cfg file

Start Your Server and Test

  1. Start your FiveM server.

  2. Join the server and check if the loading screen appears correctly.

  3. If the loading screen does not appear, check the server console for errors.

Customize the Loading Screen (Optional)

  1. Modify the index.html file to change images, text, or animations.

  2. Edit style.css to customize fonts, colors, or layout.

  3. Replace music.mp3 with your music (ensure it matches the filename in fxmanifest.lua).

Troubleshooting

  1. If the loading screen does not load:

    • Ensure all files are correctly placed inside the loadscreen folder (index.html, style.css, fxmanifest.lua, etc.).

    • Verify that fxmanifest.lua is properly structured.

    • Check server.cfg to confirm ensure loadscreen is added.

    • If images or music do not load, confirm the file paths in index.html.

  2. If music does not play:

    • Ensure the music.mp3 file is present in the folder.

    • Check if your browser allows auto-play for audio.

Conclusion

By following these steps, you can successfully install and customize a loading screen for your FiveM server. A unique loading screen enhances player engagement and adds a professional touch to your server. If you want further customization, experiment with HTML, CSS, and JavaScript to create a fully personalized experience. Enjoy modding your FiveM server!

Need Help?

If you have questions or run into any issues, our support team is here to help! Reach out using the support widget on our website or visit our support center for further assistance.

Need Help?

If you have questions or run into any issues, our support team is here to help! Reach out using the support widget on our website or visit our support center for further assistance.