{"id":189539,"date":"2025-06-07T15:19:19","date_gmt":"2025-06-07T13:19:19","guid":{"rendered":"https:\/\/fivemx.com\/?p=189539"},"modified":"2025-09-06T09:50:01","modified_gmt":"2025-09-06T07:50:01","slug":"bruckenelement-im-fivem-ladebildschirm-deaktivieren","status":"publish","type":"post","link":"https:\/\/fivemx.com\/de\/disable-bridge-element-in-fivem-loading-screen\/","title":{"rendered":"Br\u00fcckenelement im FiveM-Ladebildschirm deaktivieren"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This tutorial explains how to remove the bridge from FiveM server loading screen<br>by creating or modifying a loading screen resource.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prerequisites<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>FiveM server access with resource modification permissions<\/li>\n\n\n\n<li>Basic understanding of HTML\/CSS<\/li>\n\n\n\n<li>a Text editor like <a href=\"https:\/\/notepad-plus-plus.org\/downloads\/\" data-type=\"link\" data-id=\"https:\/\/notepad-plus-plus.org\/downloads\/\" target=\"_blank\" rel=\"noopener\">Notepad++<\/a> (or the default notepad of Windows)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Method 1: Create New Loading Screen Resource<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1: Create Resource Structure<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">loadingscreen\/\n\u251c\u2500\u2500 fxmanifest.lua\n\u251c\u2500\u2500 index.html\n\u2514\u2500\u2500 style.css\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2: Configure <a href=\"https:\/\/fivemx.com\/setting-up-fxmanifest-lua-fivem\/\" data-type=\"post\" data-id=\"162266\">fxmanifest.lua<\/a><\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">fx_version 'cerulean'\ngame 'gta5'\n\nauthor 'YourName'\ndescription 'Custom Loading Screen - Bridge Disabled'\nversion '1.0.0'\n\nloadscreen 'index.html'\nloadscreen_cursor 'yes'\n\nfiles {\n    'index.html',\n    'style.css'\n}\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3: Create index.html<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n    &lt;link rel=\"stylesheet\" href=\"style.css\">\n&lt;\/head>\n&lt;body>\n    &lt;div id=\"loading-container\">\n        &lt;h1>Server Name&lt;\/h1>\n        &lt;div class=\"progress-bar\">\n            &lt;div class=\"progress-fill\">&lt;\/div>\n        &lt;\/div>\n    &lt;\/div>\n    \n    &lt;script>\n        \/\/ Disable bridge overlay\n        window.addEventListener('DOMContentLoaded', () => {\n            const bridge = document.querySelector('.bridge-overlay');\n            if (bridge) bridge.remove();\n        });\n        \n        \/\/ Handle loading progress\n        window.addEventListener('message', (e) => {\n            if (e.data.eventName === 'loadProgress') {\n                const fill = document.querySelector('.progress-fill');\n                fill.style.width = e.data.loadFraction * 100 + '%';\n            }\n        });\n    &lt;\/script>\n&lt;\/body>\n&lt;\/html>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 4: Add to server.cfg<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">ensure loadingscreen\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Method 2: Modify Existing Loading Screen<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1: Locate Current Loading Screen Resource<\/strong> Check <code>server.cfg<\/code> for lines starting with <code>ensure<\/code> or <code>start<\/code> containing &#8220;loading&#8221; or &#8220;loadscreen&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2: Add Bridge Removal Code<\/strong> Insert into existing HTML file before closing <code>&lt;\/body&gt;<\/code> tag:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script>\n    \/\/ Remove bridge on load\n    document.addEventListener('DOMContentLoaded', function() {\n        const bridgeElements = document.querySelectorAll(\n            '.bridge-overlay, #bridge, [class*=\"bridge\"]'\n        );\n        bridgeElements.forEach(el => el.style.display = 'none');\n    });\n    \n    \/\/ Backup removal for dynamically loaded elements\n    const observer = new MutationObserver((mutations) => {\n        mutations.forEach((mutation) => {\n            mutation.addedNodes.forEach((node) => {\n                if (node.nodeType === 1 &amp;&amp; \n                    (node.classList?.contains('bridge-overlay') || \n                     node.id === 'bridge')) {\n                    node.remove();\n                }\n            });\n        });\n    });\n    \n    observer.observe(document.body, {\n        childList: true,\n        subtree: true\n    });\n&lt;\/script>\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">CSS Override Method<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add to your loading screen&#8217;s CSS file:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.bridge-overlay,\n#bridge,\n[class*=\"bridge-\"] {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Troubleshooting<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Bridge Still Visible:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clear server cache: Delete <code>cache\/<\/code> folder<\/li>\n\n\n\n<li>Verify resource load order in <code>server.cfg<\/code><\/li>\n\n\n\n<li>Check browser console (F12) for JavaScript errors<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Loading Screen Not Appearing:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Confirm <code>loadscreen<\/code> directive in fxmanifest.lua<\/li>\n\n\n\n<li>Verify file paths match exactly (case-sensitive)<\/li>\n\n\n\n<li>Check server console for resource errors<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Technical Notes<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>FiveM loading screens run in CEF (Chromium Embedded Framework)<\/li>\n\n\n\n<li>Bridge element typically injected by default loading mechanisms<\/li>\n\n\n\n<li>MutationObserver ensures removal of dynamically added elements<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Uncertainties<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Exact bridge element class names may vary between FiveM versions<\/li>\n\n\n\n<li>Some custom frameworks might use different overlay implementations<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Summary:<\/strong> Remove FiveM&#8217;s bridge overlay by creating a custom loading screen resource with JavaScript that targets and removes bridge elements on page load.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-black-background-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/fivemx.com\/how-to-create-a-custom-fivem-loading-screen\/\">How to create a custom loading screen<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial explains how to remove the bridge from FiveM server loading screenby creating or modifying a loading screen resource. Prerequisites Method 1: Create New Loading Screen Resource Step 1: Create Resource Structure Step 2: Configure fxmanifest.lua Step 3: Create index.html Step 4: Add to server.cfg Method 2: Modify Existing Loading Screen Step 1: Locate [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":189540,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1899],"tags":[],"class_list":["post-189539","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/fivemx.com\/de\/wp-json\/wp\/v2\/posts\/189539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fivemx.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fivemx.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fivemx.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fivemx.com\/de\/wp-json\/wp\/v2\/comments?post=189539"}],"version-history":[{"count":0,"href":"https:\/\/fivemx.com\/de\/wp-json\/wp\/v2\/posts\/189539\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fivemx.com\/de\/wp-json\/wp\/v2\/media\/189540"}],"wp:attachment":[{"href":"https:\/\/fivemx.com\/de\/wp-json\/wp\/v2\/media?parent=189539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fivemx.com\/de\/wp-json\/wp\/v2\/categories?post=189539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fivemx.com\/de\/wp-json\/wp\/v2\/tags?post=189539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}