{"id":157401,"date":"2024-09-17T13:29:52","date_gmt":"2024-09-17T11:29:52","guid":{"rendered":"https:\/\/hifivem.com\/?p=157401"},"modified":"2025-08-30T11:19:13","modified_gmt":"2025-08-30T09:19:13","slug":"comment-creer-un-ecran-de-chargement","status":"publish","type":"post","link":"https:\/\/fivemx.com\/fr\/how-to-create-a-loading-screen\/","title":{"rendered":"Comment cr\u00e9er un \u00e9cran de chargement pour FiveM"},"content":{"rendered":"<p><em>Welcome to this comprehensive tutorial on creating a custom loading screen for your FiveM server. Whether you&#8217;re a seasoned developer or new to FiveM, this guide will walk you through every step of the process, from creating a basic resource to optimizing your loading screen for faster load times.<\/em><\/p>\n<h2>Introduction<\/h2>\n<p>FiveM is a modification framework for Grand Theft Auto V that allows you to play multiplayer on customized dedicated servers.<br \/>\nOne of the key aspects of enhancing player experience on your FiveM server is customizing the loading screen. A well-designed loading screen not only provides essential information but also sets the tone for your server.<\/p>\n<p><strong>In this tutorial, you will learn:<\/strong><\/p>\n<ul>\n<li>How to create a FiveM resource.<\/li>\n<li>How to develop a custom loading screen resource.<\/li>\n<li>How to disable the default bridge that appears during loading.<\/li>\n<li>Techniques to make your loading screen load faster.<\/li>\n<li>How to download and install custom loading screens.<\/li>\n<\/ul>\n<p>Let&#8217;s go!<\/p>\n<hr \/>\n<h2>Prerequisites &#8211; What you need<\/h2>\n<p>Before diving into the tutorial, make sure you have the following:<\/p>\n<h3>Software Requirements<\/h3>\n<ul>\n<li><strong>Text Editor:<\/strong> Sublime Text, Visual Studio Code, Notepad++, or any code editor of your choice. <a href=\"https:\/\/notepad-plus-plus.org\/\" target=\"_blank\" rel=\"noopener\">I&#8217;ll use Notepad++, which you can download here<\/a><\/li>\n<li><strong>FiveM Server:<\/strong> A working <a href=\"https:\/\/fivemx.com\/fivem-servers\/\" title=\"Pre-made FiveM Server\" data-wpil-monitor-id=\"1421\">FiveM server installed<\/a> on your machine or hosting service. Click here to check out our tutorial<\/li>\n<li><strong>Web Browser:<\/strong> For testing and previewing your loading screen. I&#8217;ll use Chrome &#8211; you can also use Firefox.<\/li>\n<\/ul>\n<h3>Knowledge Requirements<\/h3>\n<ul>\n<li><strong>Basic HTML, CSS, and JavaScript:<\/strong> Understanding these web technologies is crucial since the loading screen is essentially a web page.<\/li>\n<li><strong>Basic Lua Scripting:<\/strong> Familiarity with Lua can be helpful but is not mandatory for this tutorial.<\/li>\n<li><strong>File Management:<\/strong> Know how to navigate directories and manage files on your operating system.<\/li>\n<\/ul>\n<hr \/>\n<h2>Understanding FiveM Resources<\/h2>\n<h3>What is a FiveM Resource?<\/h3>\n<p>A <strong>resource<\/strong> in FiveM is a collection of files that can include scripts, maps, textures, and more, which add functionality to your server. Resources are the backbone of your <a href=\"https:\/\/fivemx.com\/how-to-create-a-fivem-server\/\" id=\"76\">FiveM server&#8217;s<\/a> custom content.<\/p>\n<h3>Structure of a FiveM Resource<\/h3>\n<p>A typical resource folder contains:<\/p>\n<ul>\n<li><strong><code>fxmanifest.lua<\/code> or <code>__resource.lua<\/code>:<\/strong> Defines the resource and its configurations.<\/li>\n<li><strong>Scripts:<\/strong> Lua or JavaScript files that contain the logic.<\/li>\n<li><strong>Assets:<\/strong> Additional files like images, HTML, CSS, and sound files.<\/li>\n<\/ul>\n<h3>How Resources are Loaded in FiveM<\/h3>\n<p>FiveM loads resources based on the configuration defined in your server&#8217;s <code>server.cfg<\/code> file. When the server starts, it reads this file and loads each resource in the specified order.<\/p>\n<hr \/>\n<h2>Creating a Basic FiveM Resource<\/h2>\n<p>Before creating a loading screen, let&#8217;s understand how to create a basic resource.<\/p>\n<h3>Step 1: Setting Up the Resource Folder<\/h3>\n<ol>\n<li>Navigate to your FiveM server&#8217;s <code>resources<\/code> directory.<\/li>\n<li>Create a new folder for your resource. Let&#8217;s name it <code>my_resource<\/code>.<\/li>\n<\/ol>\n<div class=\"dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative\">\n<div class=\"flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9\"><\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-main-surface-secondary px-2 font-sans text-xs text-token-text-secondary\"><code class=\"!whitespace-pre hljs\">resources\/<br \/>\n\u2514\u2500\u2500 my_resource\/<\/code><\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3>Step 2: Creating the <code>fxmanifest.lua<\/code> File<\/h3>\n<p>In your <code>my_resource<\/code> folder, create a new file named <code>fxmanifest.lua<\/code>. This file tells FiveM how to handle your resource.<\/p>\n<p><strong>Example <code>fxmanifest.lua<\/code>:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"lua\">fx_version 'cerulean'\r\ngame 'gta5'\r\n\r\nauthor 'YourName'\r\ndescription 'A basic resource example.'\r\nversion '1.0.0'\r\n\r\n-- What to run\r\nclient_script 'client.lua'\r\nserver_script 'server.lua'\r\n<\/pre>\n<p>Easy to understand, right?<\/p>\n<h3>Step 3: Adding Basic Scripts<\/h3>\n<p>Create <code>client.lua<\/code> and <code>server.lua<\/code> files in the same directory.<\/p>\n<p><strong><code>client.lua<\/code>:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"lua\">-- Client-side script\r\nprint(\"Client script is running.\")\r\n<\/pre>\n<p><strong><code>server.lua<\/code>:<\/strong><\/p>\n<div class=\"dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative\">\n<div class=\"flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"lua\">-- Server-side script\r\nprint(\"Server script is running.\")\r\n<\/pre>\n<\/div>\n<\/div>\n<h3>Step 4: Configuring the Server<\/h3>\n<p>Open your <code>server.cfg<\/code> file and add your resource:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">ensure my_resource\r\n<\/pre>\n<h3>Step 5: Testing the Resource<\/h3>\n<p>Start your FiveM server and look for the print statements in your console to confirm that the resource is loaded. That&#8217;s it for now.<\/p>\n<hr \/>\n<h2>Developing a Loading Screen Resource<\/h2>\n<p>Now that you understand how resources work, let&#8217;s create a loading screen.<\/p>\n<h3>Step 1: Creating the Loading Screen Resource Folder<\/h3>\n<p>In your <code>resources<\/code> directory, create a new folder named <code>loading_screen<\/code>.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">resources\/\r\n\u2514\u2500\u2500 loading_screen\/\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h3>Step 2: Creating the <code>fxmanifest.lua<\/code> File<\/h3>\n<p>In <code>loading_screen<\/code>, create <code>fxmanifest.lua<\/code>.<\/p>\n<p><strong>Example <code>fxmanifest.lua<\/code>:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"lua\">fx_version 'cerulean'\r\ngame 'gta5'\r\n\r\nauthor 'YourName'\r\ndescription 'Custom Loading Screen'\r\nversion '1.0.0'\r\n\r\nloadscreen 'index.html'\r\n\r\nfiles {\r\n    'index.html',\r\n    'css\/style.css',\r\n    'js\/script.js',\r\n    'images\/background.jpg',\r\n    -- Include any other files like music or fonts\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h3>Step 3: Creating the HTML File<\/h3>\n<p>Create <code>index.html<\/code> in the <code>loading_screen<\/code> folder.<\/p>\n<p><strong>Example <code>index.html<\/code>:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;title&gt;Loading...&lt;\/title&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"css\/style.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;div class=\"loading-container\"&gt;\r\n        &lt;h1&gt;Welcome to My FiveM Server&lt;\/h1&gt;\r\n        &lt;p&gt;Loading, please wait...&lt;\/p&gt;\r\n        &lt;!-- Add a progress bar or spinner if desired --&gt;\r\n    &lt;\/div&gt;\r\n    &lt;script src=\"js\/script.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h3>Step 4: Adding CSS Styling<\/h3>\n<p>Create a folder named <code>css<\/code> and add <code>style.css<\/code>.<\/p>\n<p><strong><code>css\/style.css<\/code>:<\/strong><\/p>\n<div class=\"dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative\">\n<div>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">body {\r\n    margin: 0;\r\n    padding: 0;\r\n    background: url('..\/images\/background.jpg') no-repeat center center fixed;\r\n    background-size: cover;\r\n    font-family: Arial, sans-serif;\r\n}\r\n\r\n.loading-container {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    text-align: center;\r\n    color: white;\r\n}\r\n\r\nh1 {\r\n    font-size: 48px;\r\n}\r\n\r\np {\r\n    font-size: 24px;\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<h3 class=\"flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9\">Step 5: Adding JavaScript (Optional)<\/h3>\n<\/div>\n<p>Create a folder named <code>js<\/code> and add <code>script.js<\/code>.<\/p>\n<p><strong><code>js\/script.js<\/code>:<\/strong><\/p>\n<div class=\"dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">file:\/\/%20optional%20javascript%20functionalityconsole.log(\"loading%20screen%20is%20active.\");\/<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<h3>Step 6: Adding Assets<\/h3>\n<p>Create a folder named <code>images<\/code> and add a background image named <code>background.jpg<\/code>. You can use any image you like.<\/p>\n<hr \/>\n<h2>Disabling the Bridge on FiveM Loading Screen<\/h2>\n<h3>Understanding the Bridge Overlay<\/h3>\n<p>The &#8220;bridge&#8221; in FiveM refers to the default loading screen elements that overlay on custom loading screens. This includes the game\u2019s default hints and sometimes a loading bar.<\/p>\n<h3>Steps to Disable the Bridge<\/h3>\n<p>To <a href=\"https:\/\/fivemx.com\/disable-bridge-element-in-fivem-loading-screen\/\" title=\"Disable Bridge Element in FiveM Loading Screen\" data-wpil-monitor-id=\"1546\">disable the bridge<\/a>, you need to modify the resource manifest and include a specific directive.<\/p>\n<p><strong>Step 1: Update <code>fxmanifest.lua<\/code><\/strong><\/p>\n<p>Add the following line to your <code>fxmanifest.lua<\/code>:<\/p>\n<div class=\"dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-lua\">loadscreen_manual_shutdown <span class=\"hljs-string\">'yes'<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<p><strong>Updated <code>fxmanifest.lua<\/code>:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"lua\">fx_version 'cerulean'\r\ngame 'gta5'\r\n\r\nauthor 'YourName'\r\ndescription 'Custom Loading Screen'\r\nversion '1.0.0'\r\n\r\nloadscreen 'index.html'\r\nloadscreen_manual_shutdown 'yes'\r\n\r\nfiles {\r\n    'index.html',\r\n    'css\/style.css',\r\n    'js\/script.js',\r\n    'images\/background.jpg',\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Step 2: Manually Shutting Down the Loadscreen<\/strong><\/p>\n<p>In your <code>script.js<\/code> file, add the following code to signal FiveM when your loading screen has finished loading:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">window.addEventListener('load', function () {\r\n    setTimeout(function() {\r\n        fetch('https:\/\/localhost\/close', {\r\n            method: 'POST',\r\n            headers: {\r\n                'Content-Type': 'application\/json'\r\n            },\r\n            body: JSON.stringify({ })\r\n        });\r\n    }, 5000); \/\/ Adjust the timeout as needed\r\n});\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Note:<\/strong> The <code>fetch<\/code> call tells FiveM to close the loading screen after your content is ready.<\/p>\n<h3>Troubleshooting Common Issues<\/h3>\n<ul>\n<li><strong>Loading Screen Not Closing:<\/strong> Ensure your <code>fetch<\/code> URL is correct and that you&#8217;re using <code>loadscreen_manual_shutdown 'yes'<\/code>.<\/li>\n<li><strong>Console Errors:<\/strong> Check your browser&#8217;s developer console for any JavaScript errors.<\/li>\n<\/ul>\n<hr \/>\n<h2>Optimizing for Faster Loading Times<\/h2>\n<p>A slow loading screen can frustrate players. Here are some tips to optimize it.<\/p>\n<h3>Tip 1: Optimize Images<\/h3>\n<ul>\n<li><strong>Compression:<\/strong> Use tools like <a href=\"https:\/\/tinypng.com\/\" target=\"_new\" rel=\"noopener\">TinyPNG<\/a> to compress images without losing quality.<\/li>\n<li><strong>Formats:<\/strong> Use JPEG for photographs and PNG for images requiring transparency.<\/li>\n<\/ul>\n<h3>Tip 2: Minify CSS and JavaScript<\/h3>\n<ul>\n<li><strong>Minification Tools:<\/strong> Use tools like CSS Minifier and JS Minifier.<\/li>\n<li><strong>Combine Files:<\/strong> Reduce HTTP requests by combining multiple CSS or JS files into one.<\/li>\n<\/ul>\n<h3>Tip 3: Use CDN for Libraries<\/h3>\n<p>If you&#8217;re using libraries like jQuery, load them from a Content Delivery Network (CDN).<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"&gt;&lt;\/script&gt;<\/pre>\n<div class=\"dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative\">\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\"><\/div>\n<\/div>\n<\/div>\n<h3>Tip 4: Reduce File Sizes<\/h3>\n<ul>\n<li><strong>Audio Files:<\/strong> Compress audio files or use shorter loops.<\/li>\n<li><strong>Fonts:<\/strong> Only include the font weights and character sets you need.<\/li>\n<\/ul>\n<h3>Tip 5: Server-Side Settings<\/h3>\n<ul>\n<li><strong>Resource Prioritization:<\/strong> Load essential resources first in your <code>server.cfg<\/code>.<\/li>\n<li><strong>Streaming Assets:<\/strong> Use FiveM&#8217;s streaming capabilities wisely to avoid overloading clients.<\/li>\n<\/ul>\n<hr \/>\n<h2>Downloading Custom Loading Screens<\/h2>\n<p>If you prefer using a pre-made loading screen, here&#8217;s how you can download and install one.<\/p>\n<h3>Step 1: Finding a Custom Loading Screen<\/h3>\n<p>Custom loading screens are available on various <a href=\"https:\/\/fivemx.com\/how-to-find-fivem-communities\/\" id=\"435\">FiveM community<\/a> forums and websites.<\/p>\n<ul>\n<li><strong>Community Forums:<\/strong> Check forums like <a target=\"_new\" rel=\"noopener\">Cfx.re Community<\/a>.<\/li>\n<li><strong>Resource Websites:<\/strong> Browse sites that host FiveM resources.<\/li>\n<\/ul>\n<h3>Step 2: Downloading the Loading Screen<\/h3>\n<p>Once you find a loading screen you like:<\/p>\n<ol>\n<li><strong>Download the Resource:<\/strong> It will usually be in a <code>.zip<\/code> or <code>.rar<\/code> file.<\/li>\n<li><strong>Extract the Files:<\/strong> Use software like WinRAR or 7-Zip to extract the files.<\/li>\n<\/ol>\n<h3>Step 3: Installing the Loading Screen<\/h3>\n<ol>\n<li><strong>Place in Resources Folder:<\/strong>\n<p>Copy the extracted folder to your server&#8217;s <code>resources<\/code> directory<\/li>\n<li><strong>Verify the Resource Name:<\/strong>\n<p>Make sure the folder name doesn&#8217;t have any spaces or special characters.<\/li>\n<li><strong>Add to <code>server.cfg<\/code>:<\/strong>\n<p>Open your <code>server.cfg<\/code> and ensure the resource is added at the top.<\/p>\n<div class=\"dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative\">\n<div class=\"sticky top-9 md:top-[5.75rem]\"><\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-ruby\"><span class=\"hljs-keyword\">ensure<\/span> custom_loading_screen<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ol>\n<h3>Step 4: Configuring the Loading Screen<\/h3>\n<p>Some loading screens come with configuration files or instructions for customization.<\/p>\n<ul>\n<li><strong>Configuration Files:<\/strong> Look for files like <code>config.lua<\/code> or <code>settings.json<\/code>.<\/li>\n<li><strong>Customization:<\/strong> Follow the author&#8217;s instructions to customize images, text, or other elements.<\/li>\n<\/ul>\n<h3>Step 5: Testing the Loading Screen<\/h3>\n<p>Restart your FiveM server and connect to it to see the new loading screen in action.<\/p>\n<hr \/>\n<h2>Conclusion<\/h2>\n<p>Congratulations! You&#8217;ve learned how to create a custom loading screen for <a href=\"https:\/\/fivemx.com\/how-to-create-a-fivem-server\/\" data-wpil-monitor-id=\"1047\">your FiveM server<\/a>. Here&#8217;s a recap of what we&#8217;ve covered:<\/p>\n<ul>\n<li><strong>Creating a FiveM Resource:<\/strong> Understanding the structure and setup.<\/li>\n<li><strong>Developing a Loading Screen Resource:<\/strong> Building the HTML, CSS, and JavaScript files.<\/li>\n<li><strong>Disabling the Bridge:<\/strong> Removing the default overlay for a cleaner look.<\/li>\n<li><strong>Optimizing Loading Times:<\/strong> Techniques to make your loading screen more efficient.<\/li>\n<li><strong>Downloading Custom Loading Screens:<\/strong> How to find and install pre-made loading screens.<\/li>\n<\/ul>\n<h3>Next Steps<\/h3>\n<ul>\n<li><strong>Enhance Your Loading Screen:<\/strong> Add features like a music player, server rules, or a slideshow.<\/li>\n<li><strong>Learn More About FiveM Scripting:<\/strong> Dive deeper into Lua scripting to create more complex resources.<\/li>\n<li><strong>Join the Community:<\/strong> Engage with other FiveM developers on forums and Discord servers.<\/li>\n<\/ul>\n<p>For more resources and tutorials, check out our site :)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to this comprehensive tutorial on creating a custom loading screen for your FiveM server. Whether you&#8217;re a seasoned developer or new to FiveM, this guide will walk you through every step of the process, from creating a basic resource to optimizing your loading screen for faster load times. Introduction FiveM is a modification framework [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":36325,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2340,1899],"tags":[],"class_list":["post-157401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lua-scripting","category-tutorials"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/fivemx.com\/fr\/wp-json\/wp\/v2\/posts\/157401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fivemx.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fivemx.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fivemx.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fivemx.com\/fr\/wp-json\/wp\/v2\/comments?post=157401"}],"version-history":[{"count":0,"href":"https:\/\/fivemx.com\/fr\/wp-json\/wp\/v2\/posts\/157401\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fivemx.com\/fr\/wp-json\/wp\/v2\/media\/36325"}],"wp:attachment":[{"href":"https:\/\/fivemx.com\/fr\/wp-json\/wp\/v2\/media?parent=157401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fivemx.com\/fr\/wp-json\/wp\/v2\/categories?post=157401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fivemx.com\/fr\/wp-json\/wp\/v2\/tags?post=157401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}