{"id":157401,"date":"2024-09-17T13:29:52","date_gmt":"2024-09-17T11:29:52","guid":{"rendered":"https:\/\/hifivem.com\/?p=157401"},"modified":"2026-08-16T15:16:26","modified_gmt":"2026-08-16T13:16:26","slug":"how-to-create-a-loading-screen","status":"publish","type":"post","link":"https:\/\/fivemx.com\/pl\/how-to-create-a-loading-screen\/","title":{"rendered":"How to Create a FiveM Loading Screen"},"content":{"rendered":"

<\/p>\n

A current FiveM loading screen is an NUI resource declared with loadscreen<\/code> in fxmanifest.lua<\/code>.<\/strong> Keep the first version local and small: one HTML document, one stylesheet and one script. Add progress or server handover data only after the basic screen opens and closes correctly.<\/p>\n

\n

Back up the existing resource and keep the default automatic shutdown first.<\/strong> A broken manual-shutdown script can leave players looking at the loading screen after the game is ready.<\/p>\n<\/div>\n

Resource structure<\/h2>\n
resources\/[local]\/my_loadscreen\/\n\u251c\u2500\u2500 fxmanifest.lua\n\u2514\u2500\u2500 html\/\n    \u251c\u2500\u2500 index.html\n    \u251c\u2500\u2500 style.css\n    \u2514\u2500\u2500 app.js\n<\/code><\/pre>\n
fxmanifest.lua<\/code>:<\/p>\n
fx_version 'cerulean'\ngame 'gta5'\n\nauthor 'Your name'\ndescription 'FiveM loading screen'\nversion '1.0.0'\n\nloadscreen 'html\/index.html'\n\nfiles {\n    'html\/index.html',\n    'html\/style.css',\n    'html\/app.js'\n}\n<\/code><\/pre>\n
New resources should use fxmanifest.lua<\/code>. Do not add a legacy __resource.lua<\/code> fallback. The directives are defined in the official resource manifest reference<\/a>.<\/p>\n
Create accessible HTML<\/h2>\n
html\/index.html<\/code>:<\/p>\n
<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n  <title>Connecting to Example RP<\/title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n  <main>\n    <h1>Connecting to Example RP<\/h1>\n    <progress id=\"progress\" value=\"0\" max=\"1\" aria-label=\"Loading progress\"><\/progress>\n    <p id=\"status\" aria-live=\"polite\">Loading server resources\u2026<\/p>\n  <\/main>\n  <script src=\"app.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
Use text that remains readable over the background, respects reduced motion and does not depend on autoplay audio. Compress images and video before packaging them; every client has to download the resource.<\/p>\n
Read the documented loading progress event<\/h2>\n
html\/app.js<\/code>:<\/p>\n
const progress = document.getElementById('progress');\nconst status = document.getElementById('status');\n\nwindow.addEventListener('message', (event) => {\n  if (event.data?.eventName !== 'loadProgress') return;\n\n  const value = Number(event.data.loadFraction);\n  if (!Number.isFinite(value)) return;\n\n  const clamped = Math.max(0, Math.min(1, value));\n  progress.value = clamped;\n  status.textContent = `Loading ${Math.round(clamped * 100)}%`;\n});\n<\/code><\/pre>\n
The official Cfx.re loading-screen guide<\/a> documents loadProgress<\/code> and the other events exposed to this NUI frame. Treat event data as input and update text with textContent<\/code>, not innerHTML<\/code>.<\/p>\n
Pass only safe handover data<\/h2>\n
A server-side playerConnecting<\/code> handler can pass small values with deferrals.handover<\/code>. FiveM exposes them as window.nuiHandoverData<\/code>. Use this for display values such as a player name; never include secrets, tokens, private identifiers or data that grants an entitlement. Insert player-controlled values with textContent<\/code> or innerText<\/code>.<\/p>\n
Enable manual shutdown only when required<\/h2>\n
If the screen must fade out after client scripts start, add these lines:<\/p>\n
loadscreen_manual_shutdown 'yes'\nclient_script 'client.lua'\n<\/code><\/pre>\n
Then close it from client.lua<\/code> after the actual client-ready condition:<\/p>\n
CreateThread(function()\n    while not NetworkIsSessionStarted() do\n        Wait(100)\n    end\n\n    ShutdownLoadingScreenNui()\nend)\n<\/code><\/pre>\n
Test reconnects, resource restarts and a slow client. If the screen can remain stuck, remove loadscreen_manual_shutdown<\/code> and the client script to return to automatic lifecycle handling.<\/p>\n
Deploy and verify<\/h2>\n
    \n
  1. Add ensure my_loadscreen<\/code> to the intended point in server.cfg<\/code>.<\/li>\n
  2. Use refresh<\/code> and ensure my_loadscreen<\/code> on a development server.<\/li>\n
  3. Connect with a clean client and inspect F8 plus the server console.<\/li>\n
  4. Test a slow connection, reconnect, cancelled connection and server restart.<\/li>\n
  5. Check common desktop resolutions and a low-powered client before replacing the production resource.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Build a current FiveM loading-screen resource with fxmanifest.lua, local HTML assets, progress events, safe handover data and an optional controlled shutdown.<\/p>","protected":false},"author":1,"featured_media":36325,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2340,3207,1899],"tags":[3001,2869],"class_list":["post-157401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lua-scripting","category-loading-screens","category-tutorials","tag-fivem-script","tag-loading"],"_links":{"self":[{"href":"https:\/\/fivemx.com\/pl\/wp-json\/wp\/v2\/posts\/157401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fivemx.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fivemx.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fivemx.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fivemx.com\/pl\/wp-json\/wp\/v2\/comments?post=157401"}],"version-history":[{"count":2,"href":"https:\/\/fivemx.com\/pl\/wp-json\/wp\/v2\/posts\/157401\/revisions"}],"predecessor-version":[{"id":217361,"href":"https:\/\/fivemx.com\/pl\/wp-json\/wp\/v2\/posts\/157401\/revisions\/217361"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fivemx.com\/pl\/wp-json\/wp\/v2\/media\/36325"}],"wp:attachment":[{"href":"https:\/\/fivemx.com\/pl\/wp-json\/wp\/v2\/media?parent=157401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fivemx.com\/pl\/wp-json\/wp\/v2\/categories?post=157401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fivemx.com\/pl\/wp-json\/wp\/v2\/tags?post=157401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}