Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more

The reliable way to add a FiveM loading screen is to package the page as a resource. Create a resource directory with an fxmanifest.lua file and an html/ directory, point the manifest’s loadscreen directive at your HTML entry file, list every page asset in files, then enable the resource with ensure in server.cfg. Restart the server and join to verify that the page appears while game data loads.

What a FiveM loading screen actually is

A loading screen is not a separate server setting or an image copied into the GTA V installation. It is a normal FiveM resource containing web content. FiveM loads the resource’s HTML page in its loading-screen browser and uses the resource manifest to find the page and its dependencies.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

A minimal implementation has three parts:

  • A resource folder inside the server’s resources directory.
  • An fxmanifest.lua file that identifies the game, the loading page and the files the page can request.
  • An ensure entry in server.cfg so the resource starts when the server starts.

The browser will not automatically discover files that are merely present on disk. If your HTML references a stylesheet, JavaScript file, font or image, that path must be included in the manifest’s files list. Missing entries are the most common reason for a blank or unstyled loading screen.

Choose automatic or manual shutdown first

In the standard automatic mode, the loading screen remains visible while the game loads and closes through FiveM’s normal loading-screen shutdown flow. This is the safest choice for a first installation because it does not depend on a custom client script knowing exactly when the player has finished spawning.

#1 Best Overall
Sale
Compressed Air Duster,130000RPM Super Power Cordless Air Duster,Rechargeable Brushless Blower,3 Gear Adjustable Blower with LED Light,Dust Remover for Computer/House/Outdoor/Car
  • Powerful Turbo Fan:CAGIWIRU Electric Air Duster have reached speed up to 130000RPM,Can efficient remove dust and debris.With LED light and Three Adjustable Speed to meet with different cleaning tasks.
  • With Attached USB C Fasting Charging cable.Charing 3 hours,Enjoy up to 240 minutes of use on the lowest setting, For third speed can use for 25mins.with four charging options to meet with your needs.
  • Wide Application:Upgraded attached 5 different nozzles,making it suitable for a variety of scenes, such as car,pet, pc, keyboards, and other electronic devices. It also serves for office and home clean duster.
  • Handy Design & Portable:Cordless air duster electric nozzle is Light weight and small size, design and comfortable to hold and space saving, convenient to carry around. You can put it in your room or inside the car without taking up space.
  • Warranty & Support: Our Electric air duster comes with 5 years warranty and 24/7 customer service. During this period, if you have any questions,pls kindly feel free to contact us.

Manual mode gives you control over the closing moment. Set loadscreen_manual_shutdown 'yes' in the manifest, then close the NUI loading screen from a client script with ShutdownLoadingScreenNui() after your own spawn logic confirms that the player is actually spawned. If that call never runs, every player can remain stuck on the loading page. Use manual mode only when you have a specific reason to coordinate the screen with your framework or spawn flow.

The old native named SET_MANUAL_SHUTDOWN_LOADING_SCREEN_NUI is deprecated. The manifest directive is the current way to request manual shutdown behavior. Do not add the deprecated native simply because an older tutorial shows it.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Prepare the resource directory

Find the server’s resources folder

Use the directory that your server configuration already scans for resources. Create a new folder with a name that contains only simple letters, numbers, underscores or hyphens. In the examples below, the folder is called my_loadscreen and is placed in a [local] category folder.

The category name is optional; it is only an organizational convention. The important part is that the folder containing fxmanifest.lua is itself the resource folder that you will ensure.

Create a predictable layout

Start with this structure:

resources/
└── [local]/
    └── my_loadscreen/
        ├── fxmanifest.lua
        └── html/
            ├── index.html
            ├── style.css
            ├── app.js
            └── images/
                └── logo.png

Keep web paths relative and consistent. For example, if the HTML says images/logo.png, the file must be at html/images/logo.png. A mismatch in capitalization can also fail on hosts whose file systems treat uppercase and lowercase names differently.

Write the FiveM resource manifest

Minimal automatic-shutdown manifest

Create fxmanifest.lua in the root of my_loadscreen:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #2
EVEO® Screen Cleaner Spray Kit (Streak-Free) TV Screen Cleaner for Smart TV, Lcd, LEd, Oled | Computer Screen Cleaner Spray and Wipe Microfiber Cloth - TV, Monitor, Laptop, iPad, Car - 6.7oz 1 Pack
  • Screen Cleaner is Your Screen’s New Bestfriend! - EVEO is proud to present a screen cleaner that’s perfectly suited for your TV. Meet your new screen cleaner, computer screen cleaner, laptop cleaner, iPad cleaner, Macbook,tv cleaner or any other electronic device. Our screen cleaner spray and wipe along with the included plush microfiber cloth, easily removes dust, fingerprints & other smudges on the screen’s surface. Clean effectively for a streak-free screen
  • Gentle on your Screens - Our screen cleaner spray and wipes is compatible to be used even for the most sensitive LCD, LED, CRT, and OLED screens in proper use. Be at ease knowing that this product is compatible with all the major brands: LG, SONY, Samsung, Sharp, iPad, iPhone, Android screens, Kindle, PC monitors - we’ve got you covered! Can be used as LCD screen cleaner, tv cleaner, smart tv screen cleaner, and more
  • Premium Super Soft Plush Microfiber Cloth - Included in this efficient screen cleaning kit. This screen cleaner spray and wipe has our signature plush microfiber cloth specially designed to comply with screens and monitors and leave them streak-free. Has been shown to effectively absorbs stubborn stains, zero streaks, and no fiber shedding. Always use this together with our screen cleaner for the best results
  • Easy-to-Use Screen Cleaner Kit + microfiber cleaning cloth - The EVEO Screen Cleaning Kit will easily be your new favorite tool when it comes to taking care of the things you love most, quick and easy solution for a streak-free screen. Simply screw on the sprayer gun on the screen cleaner bottle. Spray the cleaning liquid onto the microfiber cloth, then wipe the screen until desired cleanliness & shine is achieved.
  • Quality Screen Care Kit Worth Purchasing - Enjoy a convenient Screen Cleaner anytime, anywhere you need it. Your satisfaction is our top priority. We stand behind the quality of our products and that’s why, you shouldn’t be worrying at all. We manufacture the Best Screen Cleaner. and can be used for laptop cleaning kit, laptop screen cleaner, tv screen cleaner for smart tv. MacBook screen cleaner, monitor cleaner or screen cleaner spray for electronic devices with microfiber cleaning cloth
fx_version 'cerulean'
game 'gta5'

loadscreen 'html/index.html'

files {
    'html/index.html',
    'html/style.css',
    'html/app.js',
    'html/images/logo.png'
}

The manifest directives have distinct jobs:

Directive Purpose Important detail
fx_version 'cerulean' Selects the resource manifest version. Use the manifest version shown by current FiveM documentation for a new resource; the example uses the commonly documented cerulean value.
game 'gta5' Declares the target game. FiveM server resources for this use case target GTA V.
loadscreen 'html/index.html' Points FiveM to the loading-screen entry page. The same HTML path must also appear in files.
files { ... } Whitelists files that the loading page can load. Include the HTML file and every CSS, JavaScript, image, font or other local asset referenced by the page.

The loadscreen directive is declared in the same general manifest style as ui_page. It does not replace the files block: both declarations are needed for the entry document and its assets.

Manifest for manual shutdown

If you intentionally want your client code to decide when the screen closes, add the manual directive:

fx_version 'cerulean'
game 'gta5'

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

files {
    'html/index.html',
    'html/style.css',
    'html/app.js',
    'html/images/logo.png'
}

Do not enable this option as a cosmetic preference. It changes responsibility for closing the screen from the normal automatic flow to your resource’s logic.

Build the HTML loading page

Use a complete entry document

A simple html/index.html can display a logo, status text and a progress-style visual while the client loads:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Loading</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="loading-card">
        <img src="images/logo.png" alt="Server logo">
        <h1>Connecting</h1>
        <p>Preparing the server...</p>
        <div class="bar" aria-hidden="true"><span></span></div>
    </main>
    <script src="app.js"></script>
</body>
</html>

The paths in this document explain why the manifest lists html/style.css, html/app.js and html/images/logo.png. If you add another asset later, add its path to files at the same time.

Add styling without changing the FiveM setup

For example, html/style.css can provide a centered, responsive page:

Rank #3
BladeHawks RGB Gaming Mouse Pad Extra Large Extended 31.5x12 Inch-Black
  • 【Large size】:Measuring 800 x 300 mm/ 31. 5×12 inches, which is wider and taller than others. Large mouse pad can perfectly fit your keyboard and mouse of any size, and there is also ample space for peripherals such as phones, tablets, etc.
  • 【LED backlight mouse pad】:Blade Hawks RGB mouse pad provides 7 static modes and 7 dynamic modes will give you the options you are looking for. Power-off memory function remembers the last lighting mode you selected. The super glow fiber Chroma will give you a colorful gaming setup that you want.
  • 【Anti-slip rubber base】:Made from Natural rubber, this gaming mousepad will firmly grip your desktop, allowing you to enjoy the ultimate precision in the games you are most passionate about. It also comes with a texture that enhances this ability even further.
  • 【Smooth and waterproof surface】: Micro-textured cloth surface, for extremely precise mouse control and a smooth movement. When liquid splashes on the gaming mouse pad, it forms water droplets and slides down. Will not delay your work or gameplay.
  • 【Plug and play】: This mouse and keyboard pad is powered by USB, plug and play, no driver required. One button control light modes. Press one time to change the lighting mode, press twice to change the brightness, press and hold about 3 seconds turn ON/OFF.
:root {
    color-scheme: dark;
    font-family: system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #111827;
    color: #f9fafb;
}

.loading-card {
    width: min(90vw, 520px);
    padding: 2rem;
    text-align: center;
}

.loading-card img {
    max-width: 220px;
    height: auto;
}

.bar {
    height: 8px;
    margin-top: 1.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: #374151;
}

.bar span {
    display: block;
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: #60a5fa;
    animation: move 1.4s ease-in-out infinite alternate;
}

@keyframes move {
    from { transform: translateX(-20%); }
    to { transform: translateX(140%); }
}

Keep the page self-contained while diagnosing installation. A page that depends on an external service can appear broken when the game client cannot reach that service, whereas local CSS and images let you determine whether the resource itself is configured correctly.

Enable the resource in server.cfg

Open the configuration file that your server starts with and add this line:

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
ensure my_loadscreen

Use the exact resource-folder name, not the parent category name and not a path such as [local]/my_loadscreen. The ensure command starts the resource if it is stopped and keeps it enabled across restarts.

Save the configuration, restart the server and join it as a player. Joining is necessary for a meaningful test because the loading page is presented to connecting clients, not merely to the server console.

Test the screen in a controlled order

  1. Confirm the resource is found. Check the server console during startup for the resource name and any manifest error. A typo in the folder name or a missing fxmanifest.lua prevents normal startup.
  2. Connect with a fresh client session. Join the server after restarting it rather than relying on a page left in an old client session.
  3. Check the first visual render. Verify that the HTML appears, the background is styled and the logo loads. A plain page usually indicates that the CSS or image was omitted from files or has a wrong relative path.
  4. Watch the transition into the game. In automatic mode, the screen should disappear through the normal loading flow. In manual mode, verify that your post-spawn code actually invokes ShutdownLoadingScreenNui().
  5. Reconnect after every manifest change. Loading-screen assets are read during connection, so changing a file while already in the game does not prove that a new client can load it.

Implement manual shutdown safely

Manual shutdown is useful when the page must remain visible until your own initialization or spawn sequence completes. The call belongs in a client script, and it should run only after the player has really spawned. Keep the call in the same code path that already knows your spawn operation succeeded:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
-- client.lua

local function closeLoadingScreenAfterSpawn()
    ShutdownLoadingScreenNui()
end

-- Call closeLoadingScreenAfterSpawn() from your existing
-- post-spawn handler, after the player is ready.

The snippet deliberately does not guess which framework event your server uses. Frameworks can have different spawn and initialization events; connect the function to the handler that your server already uses. If the resource contains client.lua, declare that script in the manifest using the normal client-script declaration for your FiveM resource, and include any additional files referenced by the resource.

Rank #4
Sale
Vaydeer Wrist Rest for Keyboard and Mouse, Computer Ergonomic Wrist Support Pad, Soft Memory Foam Arm Cushion for Desk, Palm Hand Office Laptop Typing
  • 【Softer and More Comfortable】Vaydeer wrist rest has unique diamond pattern, which is the combination of softness and aesthetics. The materials of wrist rest are improved into higher quality memory foam and covered with silky smooth lycra. The computer wrist rest makes you as comfortable and cushiony as like rest your wrists on clouds.
  • 【Ergonomic Wrist Saver】The wrist rests for keyboard and mouse comes with a 17.32×3.15×0.83 inch keyboard wrist pad and a 5.94×3.15×0.83 inch mouse wrist support. Based on ergonomic design, the unique concave shape is the perfect fit for your wrist joints. The wrist rest pad fits most computer keyboards and laptops, improve hand and wrist posture, release your wrist and arm stress.
  • 【Non-Slip Rubber Bottom】Featuring an anti-skid silicone base on the bottom, this wrist keyboard support stays firmly in place on your desk, preventing the padding from sliding around, ensuring stable and consistent wrist support during extended computer sessions.
  • 【Better Experience & Pain Relief】Our keyboard arm rest is beneficial to alleviate the soreness caused by direct contact and friction between your arm and a hard desk surface, reducing the risk of wrist fatigue or carpal tunnel. The soft texture of memory foam can evenly distribute the pressure around your wrists and provide good support with just enough give.
  • 【Helpful in Multiple Scenarios】Whether you're working, studying, writing, typing, gaming, this keyboard and mouse rest combo is an essential accessory to add comfort and support to your hands and wrists. It’s also a great gift for men, women, family, friend, coworker, gamer, teacher, etc.

Test failure handling deliberately: if the player remains on the screen, remove loadscreen_manual_shutdown 'yes' and the manual client call, restart the server and return to automatic handling. That isolates whether the page itself works and prevents a missed callback from blocking every connection.

Standalone resource versus a framework-bundled loading resource

A standalone resource is the simplest option when you only need a custom HTML page. You control the folder, manifest, assets and optional client script, and no framework-specific data contract is required by the loading page itself.

A framework-bundled resource can reduce duplication when your server already uses a framework that ships a loading resource. The trade-off is setup coupling: the framework resource may expect particular handover data, initialization order or client events. Before replacing it, identify which resource currently owns the loading screen and whether another resource already declares a loadscreen. Running two competing loading-screen resources can make it unclear which page is displayed and which script is responsible for shutdown.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Choice Setup effort Control Main risk
Standalone resource Low: create the manifest, web files and one ensure line. Direct control of HTML, CSS, JavaScript and optional shutdown logic. You must maintain the page and any integration code yourself.
Framework-bundled resource Usually lower if it is already installed and configured. Constrained by the framework’s expected events and data. A framework update or missing handover value can affect the page or its shutdown behavior.

Choose one owner for the loading screen. If you migrate from a bundled resource to your own folder, disable the old resource before testing the new one so that the result is attributable to a single manifest.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Troubleshoot the common failures

Symptom Likely cause Fix
No loading screen appears. The resource is not started, the folder name in ensure is wrong, or the manifest is not in the resource root. Confirm the folder contains fxmanifest.lua, use the exact folder name in ensure my_loadscreen, restart and inspect the console.
The screen is completely blank. The path in loadscreen does not match the actual HTML file, or the HTML file is not listed in files. Make the path exactly html/index.html in both places and verify capitalization.
HTML appears but has no styling. The stylesheet path is wrong or the CSS file is missing from files. Match the HTML’s href to the on-disk path and add that path to the manifest.
The logo or other image is missing. The image was not listed, or the relative path points to the wrong directory. For src="images/logo.png", use html/images/logo.png in files.
JavaScript does not run. The script file is not listed, its path is incorrect, or a JavaScript error stops execution. List the script, check the relative src and inspect the browser/client console for syntax errors.
The player never reaches the game. Manual shutdown is enabled but the client never calls ShutdownLoadingScreenNui(). Verify the post-spawn handler, or remove loadscreen_manual_shutdown 'yes' and the manual code to restore automatic handling.
Changes are not visible. The client is still using a previous connection session or the server was not restarted after a configuration change. Restart the resource or server as appropriate, disconnect fully and reconnect.
Two different pages appear on different connections. More than one resource is declaring a loading screen. Find the other loading resource, stop or disable it, then test with one active owner.

Use cursor support only when the page needs interaction

A loading page normally displays information and does not require a mouse. If your design includes a clickable control or another reason for mouse input, add this manifest directive:

loadscreen_cursor 'yes'

The cursor is not shown by default for legacy reasons. Enabling it changes the interaction available on the loading screen; it does not solve missing assets or shutdown problems. Add it only when the page genuinely needs pointer input.

Best Value
Sale
Under Desk Cable Management Tray No Drill, Metal Mesh Cable Management Under Desk with Clamp Mount, 2 Hole Cable Tray with Wire Management and Cord Organizer for Home Office Standing Desk
  • 【No Drill Mounted】Cable management tray can be assembled in as little as 3 minutes or less-simply. Side clips easily clampe the edge of desk, pass through the holes on the sides, and secure excess cables with baskets. Desk cable management supports inward or outward installation to meet your needs in different scenarios, and provides you with great convenience when collecting and organizing wires.
  • 【Rubber Pad Protects Desk】Wire organizer under desk built-in soft rubber pads on the clamp protect your desk from scratches, so you will not damage your furniture or office.
  • 【Sturdy and Beautiful】Cord management under desk is made of high-quality carbon steel and holds about 15 lbs. The wire basket has 2 holes on each side of the tray to enable your cables to pass freely. Cable baskets are suitable for desk thickness use from 0.4" to 2.4".
  • 【Space Saving & Keep Organized】Desk cable management tray holds all your power cords, outlet strips, USB hubs and computer transformers hidden from your feet, and the data cables will not enter the vacuum cleaner to keep your desk clean and tidy. Desk wire organizer is also suitable for use in the kitchen and outdoors.
  • 【Reduce Safety Risks】Cable tray under desk keeps all plugs away from your kids, no more worry about tripping. Using 2 holes wire tray saves extra space, helps you easily cabling and wire protection. The mesh design is not easy to accumulate dust, but avoids safety accidents caused by messy wires.

Keep the resource maintainable

Update the manifest with every new asset

Whenever you add a font, image, stylesheet, JavaScript module or video, update the files block in the same change. Treat the manifest as an explicit inventory rather than assuming that a wildcard or directory listing will expose an asset.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Keep connection-critical code small

The loading screen is shown during the connection process. Heavy scripts, very large images or unnecessary network requests increase the amount of work the client must perform before the page becomes useful. Start with a small local page, then add visual features one at a time while reconnecting to test each change.

Document the shutdown contract

If manual mode is enabled, write down which client handler is responsible for calling ShutdownLoadingScreenNui(). A future change to spawn logic can otherwise remove the call and leave every player stuck. If there is no clear owner, use automatic shutdown instead.

Use a pre-deployment checklist

  • fxmanifest.lua is in the resource root.
  • The loadscreen path points to the real HTML file.
  • The HTML file appears in files.
  • Every local CSS, JavaScript, image and font path appears in files.
  • The folder name in ensure exactly matches the resource folder.
  • Only one resource owns the server’s loading screen.
  • Manual shutdown is disabled unless a tested post-spawn call closes the NUI.
  • A clean reconnect has been tested after the last manifest and asset change.

Final installation example

For a basic automatic screen, the complete working configuration is:

-- resources/[local]/my_loadscreen/fxmanifest.lua
fx_version 'cerulean'
game 'gta5'

loadscreen 'html/index.html'

files {
    'html/index.html',
    'html/style.css',
    'html/app.js',
    'html/images/logo.png'
}

-- server.cfg
ensure my_loadscreen

This configuration gives FiveM an entry page, exposes each asset that page requests and starts the resource at server startup. Add manual shutdown only after the automatic version works and you have a tested reason to control the closing point.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.