简介Flexy-Loading-Screen-FiveM 是一套为 FiveM 游戏服务器量身打造的加载屏幕定制项目主要面向希望提升服务器界面质感的管理员。方案借助 CSS 动画、渐变与字体排版将原本简单的等待页面改造为动态的品牌展示窗口有助于降低玩家等待时的枯燥感。资源包共 21 个文件压缩后约 2.75MB内部通过 HTML 构建页面骨架CSS 完成视觉样式与动效JavaScript 支持交互逻辑Lua 负责服务端资源加载同时包含 woff/woff2 字体、OGG 背景音乐、PNG 图标等媒体素材其中字体覆盖多种字重以适配不同显示场景音乐文件可作为加载背景音图标则用于展示服务器标识。从结构、样式到媒体资源这套文件组合构成完整的启动界面并附有 README 说明方便具备一定前端基础的管理员快速部署与二次开发管理员可自行调整配色、文字、动画节奏与背景音乐让加载界面更贴合社区主题。目前已有 154 人学习对于希望低成本强化加载体验、塑造服务器专属视觉风格的用户来说是一份轻量且实用的参考方案。1. 一个 CSS 驱动的 Flexy 加载屏幕凭什么让 FiveM 玩家多等十秒也愿意做过 FiveM 服务器维护的人都有同感默认加载界面黑底白字玩家进服前那 5 到 10 秒是最容易流失的窗口期。Flexy-Loading-Screen-FiveM 就是干这个的——用纯 CSS Flexbox 排版把服务器 Logo、进度条、在线人数、公告文本推到同一屏让加载过程从“干等”变成“看板”。资源本体不依赖复杂后端一个fxmanifest.lua、一个index.html加一份 CSS 主样式就能跑起来。适合两类人想快速替换默认加载页的服务器主以及想学 CEF 前端布局的模组开发者。我拆这个资源时最直接的感受是布局本身不难难的是全套文件之间的路径关联与数据对接坑基本集中在 CSS 文件引用和 JS 消息格式上。2. 拆开看 Flexy 的结构文件清单与 CSS 布局原理先说结论Flexy 这类资源之所以叫“Flexy”是因为页面骨架完全围绕 CSS Flexbox 排版展开——外层容器负责垂直居中子容器负责信息分组进度条和旋转动画再各自占一层视觉空间。理解这份资源不需要先懂 FiveM 的脚本 API先把文件归属和 flex 容器关系理顺后面改样式才不会动一处碎一片。2.1 四件套文件清单fxmanifest 管注册、HTML 管骨架、CSS 管布局、JS 管数据FiveM 资源要能被服务器识别必须在资源目录里放一个fxmanifest.lua。Flexy 的标准目录结构通常是这样的flexy-loading-screen/ ├── fxmanifest.lua ├── index.html ├── css/ │ └── flexy.css ├── js/ │ └── flexy.js └── img/ ├── logo.png └── background.jpg这个排列是加载屏幕类资源通用的目录习惯Flexy 沿用的也是同一套。fxmanifest.lua里的关键配置如下-- fxmanifest.lua fx_version cerulean game gta5 loadscreen index.html loadscreen_manual_http false files { index.html, css/flexy.css, js/flexy.js, img/logo.png, img/background.jpg }这里每个字段都有明确职责。fx_version cerulean声明使用新版资源格式game gta5告诉运行时这份资源挂在哪个游戏环境上。loadscreen index.html是加载屏幕的入口开关而loadscreen_manual_http false则决定静态文件以自动方式提供给浏览器。files{}里列出的每个文件都是在页面加载时允许被浏览器访问的白名单。这里有个容易忽略的细节点loadscreen_manual_http如果改成trueFlexy 页面就必须自己通过 HTTP 请求去拉取所有静态资源意味着你要额外提供一个能访问的 Web 服务。常规部署推荐保持false除非你确实需要把背景、字体等资源放到独立服务器上做 CDN 分发。新手配置时最常翻车的就是files{}列表和 HTML 实际引用的文件对不上导致加载屏幕白屏。后面避坑章节会专门展开。2.2 Flex 布局三板斧容器居中、卡片分区与子项间距Flexy 的 CSS 核心逻辑上落在三个能力上全屏居中、弹性子项、间距控制。先看一段最基础的样式/* css/flexy.css */ html, body { height: 100%; margin: 0; background: url(../img/background.jpg) center/cover no-repeat; font-family: Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; } .loadscreen-wrap { display: flex; justify-content: center; align-items: center; height: 100vh; } .loadscreen-card { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 400px; padding: 24px 32px; background: rgba(15, 15, 20, 0.72); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); }代码逻辑很直白.loadscreen-wrap用display: flex配合justify-content: center和align-items: center让内部卡片在任意分辨率下都保持水平垂直居中。.loadscreen-card再把方向切换成column让 Logo、进度条、文本信息从上到下排列gap: 12px控制子项间距。一个值得注意的选择为何要用gap而不是传统margin因为 Flex 容器内用margin-top做间距时相邻元素的上下边距容易叠加出视觉不一致而gap是 Flexbox 与 Grid 原生支持的间距属性像这样统一隔离子项后续新增元素时不用手动补 margin。Flexy 的资源里大量使用这种做法这比早期加载屏样式里“每个子项各写一个 margin”的维护成本低得多。如果你想让卡片在更宽的屏幕上不显得过于横向拉伸可以顺手补一句max-width: 420px;。Flex 布局的优点是容器宽度不再依赖精确像素——当然Flexy 作为模板也保留了固定宽度的兼容写法方便快速对齐设计稿。2.3 动效与进度条纯 CSS 模拟加载状态的可行边界Flexy 的进度条和旋转动画不需要 JavaScript 逐帧驱动用 CSS 就能跑得足够顺。下面这段就是常见的旋转等待器和进度条样式.spinner { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: #00b4ff; border-radius: 50%; animation: spin 1.2s linear infinite; } keyframes spin { to { transform: rotate(360deg); } } .progress-track { width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #00b4ff, #3affc3); transition: width 0.4s ease; }.spinner的动画原理是利用 border 的透明部分与顶部边框颜色不同再通过rotate不断旋转形成一个视觉上不间断的圆环转圈效果。进度条则分两层外层.progress-track是轨道内层.progress-fill是填充块宽度从 0% 到某个终值的变化由 JS 端接收服务器数据后更新style.width来完成。这里要给一个明确的边界提醒Flexy 这类模板的进度条绝大多数是“模拟进度”并不代表 FiveM 底层真实的资源加载完成度。服务器端真正切换场景时会通过事件通知页面隐藏或跳转而不是等进度条走满。所以你在改样式时不要指望 CSS 进度条和实际游戏加载进度严格同步——它更多是承担“给玩家一个视觉反馈”的任务。如果你需要真实的加载进度那得额外对接 FiveM 的加载事件而不是靠这个模板自带的动画。3. 接到 FiveM 服务器上安装流程、fxmanifest 模式与数据通道3.1 安装五步走目录放置、启动顺序与验证方法Flexy 的安装本质上就是一次标准 FiveM 资源部署。整个流程可以收敛成五步每步都有明确的检查点。第一步把解压后的整个flexy-loading-screen目录放进服务器的resources目录下。注意目录层级别把文件直接散在resources根目录否则运行时会找不到资源名。第二步确认fxmanifest.lua里的loadscreen index.html指向的页面文件名与实际一致大小写也严格区分。第三步修改服务器主配置server.cfg在ensure行里加载这个资源顺序一般放在基础框架之后即可ensure flexy-loading-screen第四步启动服务器。如果是热重载可以在控制台执行restart flexy-loading-screen观察是否有报错。第五步验证生效正常进入服务器在连接阶段停留几秒如果看到的是 Flexy 的卡片式加载页并且服务器名、Logo 正常显示就说明安装成功。这里的启动顺序有一个实践上的偏好我会把加载资源放在ensure列表比较靠前的位置像这样确保它在玩家连接阶段就已启动。如果放在某个大资源后边理论上不影响功能但服务器控制台报错时不容易定位是“加载屏幕没起来”还是“后续资源把它覆盖了”。3.2 fxmanifest 两种模式loadscreen_manual_http 的 false 与 true很多人在配置 Flexy 时会忽略loadscreen_manual_http这个开关实际上它决定了页面静态文件的获取路径。两种模式的差异可以列出一个小对比配置值文件来源适用场景注意点false运行时自动提供files{}列表中的文件绝大多数单机部署、小规模服务器不需要额外 Web 服务路径必须与files{}严格一致true页面自行请求外部 URL文件分发到独立服务器、CDN、大规模集群需要在 HTML 里改绝对地址配置成本高一个层级如果设为trueFlexy 的index.html里就再也不应该出现css/flexy.css这类相对路径而是要改成https://你的域名/flexy/css/flexy.css。这种做法的好处是文件可以由 CDN 缓存减轻游戏服务器带宽压力坏处是需要额外维护一个静态站点且一旦域名或路径变更玩家会直接看到损坏的页面。日常使用我建议保持默认的false。Flexy 的文件列表很小几张图、一个 CSS、一个 JS直接由运行时提供是最省事、也最少翻车的路径配置方式。3.3 JS 端与 Lua 端的数据对接message 事件与 JSON 约定加载屏幕页面本身不执行 FiveM 的 Lua 脚本它运行在 CEF 浏览器环境里只能通过浏览器的标准机制接收消息。Flexy 的数据链路是典型的前后端分离服务端 Lua 负责收集数据并推送JS 端注册message事件监听。先看服务端推送侧的一个示意写法-- server.lua 或集成在 fxmanifest 声明的 server_script 中 local payload json.encode({ action serverInfo, name GetConvar(sv_hostname, Default Server), players GetNumPlayerIndices(), max GetConvarInt(sv_maxclients, 32) }) SendLoadscreenMessage(payload)这段代码先组装 JSON 结构json.encode保证传输的数据不会出现编码歧义再通过SendLoadscreenMessage推送到加载屏页面。不同资源对推送时机的处理不同有的是循环发送有的是在玩家连入时发一次。你可以根据服务器在线人数是否需要实时变化来决定循环间隔常见做法是每秒推送一次。再看 JS 接收侧// js/flexy.js window.addEventListener(message, function (event) { const data event.data; if (!data || typeof data ! object) return; if (data.action serverInfo) { document.getElementById(server-name).textContent data.name; document.getElementById(player-count).textContent data.players / data.max; } });JS 端的逻辑并不复杂监听message事件取出event.data判断action字段后分别填入页面元素。这里请特别注意Flexy 模板对消息格式有约定action字段的取值必须和 JS 端判断保持一致否则数据到了页面也不会显示。改动字段名时两端要一起改这是资源调整时最常遇到的“黑匣子”问题。如果你自己写数据推送建议保持一个字段只负责一件事动作走action内容走内容字段不要混在一个层级里。Flexy 这个约定本身是干净的但很多人在二次开发时往里塞数组、嵌套对象导致 JS 端解析时越写越长最后干脆退回最简结构。4. 定制成自家的风格CSS 变量换皮、布局微调与速度节奏4.1 CSS 变量做主题换肤一处改色全站生效Flexy 如果在样式表里大量使用硬编码颜色每次换主题就得全局搜索替换。更好的做法是把所有关键颜色收敛成 CSS 变量这也是许多加载屏幕资源在更新后采用的方式。:root { --color-primary: #00b4ff; --color-glow: #3affc3; --color-bg: #0d0d0d; --color-text: #f5f5f7; --font-family: Segoe UI, PingFang SC, sans-serif; } .loadscreen-card { background: rgba(15, 15, 20, 0.78); border: 1px solid rgba(255, 255, 255, 0.06); } .server-title { color: var(--color-text); } .spinner { border-top-color: var(--color-primary); } .progress-fill { background: linear-gradient(90deg, var(--color-primary), var(--color-glow)); }改动主题时你只需要覆盖:root里的变量比如把--color-primary从蓝色换成服务器主题的橙红色进度条和转圈动画会同步变色不用逐条去翻选择器。这种做法的收益在后期维护时特别明显你不是在“改样式”而是在“换主题”。如果你想把换肤能力暴露给不懂 CSS 的维护者可以在 CSS 文件顶部留一段注释写清楚每个变量控制的是哪一块视觉区域。Value 型变量收敛到位后整个资源的外观维护就变成改几行变量的问题而不是频繁翻找样式代码。4.2 文本与 Logo 的 Flex 对齐策略Flexy 的信息区通常由 Logo、服务器名、在线人数、进度条四个模块组成。这些模块在水平或垂直方向的对齐策略直接决定观感。常见做法是全部垂直居中保持卡片视觉重心稳定如果你想让文本左对齐而进度条撑满宽度则需要给不同子项设置独立的align-self。.logo-row { display: flex; align-items: center; gap: 8px; } .info-left { align-self: flex-start; text-align: left; } .progress-track { width: 100%; }这里有个细节.progress-track设置width: 100%后它的宽度是相对父容器.loadscreen-card的而不是相对屏幕。如果你在更外层的容器里也用了display: flex则要确认内层宽度不会被压缩。一个隐藏得很深的 flex 陷阱是Flex 子项的默认min-width: auto会导致大段文本把卡片撑破稳妥的做法是给可能超长的文本容器补一句min-width: 0。.server-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }这套组合能让过长的服务器名变成省略号结尾而不是把布局挤歪。Flexy 这类模板默认不开启文本截断你实际部署时服务器名一旦过长布局就会“炸”得很难看。我通常会把这个习惯写进自己的改版清单每次拿到新加载屏都先查一遍文本溢出。4.3 动效节奏animation 时长、缓动曲线与逐帧开销转圈动画的时间、进度条过渡的缓动曲线都可以单独调。下面是几个常用参数的修改位置.spinner { animation-duration: 0.9s; /* 旋转一圈耗时数值越小越急促 */ animation-timing-function: linear; /* 保持匀速才符合转圈物理感 */ } .progress-fill { transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); }animation-duration调整转速0.9 秒一圈比默认的 1.2 秒显得更有“加载中”的紧迫感但也容易造成烦躁0.6 秒以下不适合长时间停留。cubic-bezier(0.22, 1, 0.36, 1)是带有“先快后慢”效果的缓动曲线和纯线性对比进度条从 0% 推进到 70% 会更有呼吸感。动效不是越多越好。背景图缓慢放大这类效果虽然好看但在低端机上会占用 GPU 合成资源甚至拖慢播放入场。加载屏幕本身是在玩家进服前的关键阶段运行动画掉帧会让玩家觉得服务器“卡”。我一般会限制同时运行的动画不超过三个进度条、旋转器、一个背景缓慢缩放。其余花哨效果都减掉确保加载过程本身不成为一个负担。5. 上线避坑五个常见的 Flexy 故障与排查5.1 进入服务器时白屏加载页完全没出现现象连接后玩家看到的是空白页面没有背景图没有文字也没有任何报错弹窗。原因最常见的是files{}列表与实际引用的文件不一致。HTML 里写了css/flexy.css但fxmanifest.lua的列表里漏了这行或者文件名大小写不同。CEF 拿不到资源时不会弹窗提醒而是直接在控制台输出 404 错误屏幕上就是白板。解决打开服务器控制台查看资源加载日志或者直接在浏览器环境里打开页面调出开发者工具抓网络请求。只要看到Failed to load resource就对照files{}逐项补齐。处理完改一行restart不生效再检查loadscreen入口文件名是否一致。5.2 进度条显示 100% 但迟迟不进入游戏现象加载屏幕的元素都正常显示进度条冲顶玩家却卡在加载界面好几秒才切入游戏。原因Flexy 的进度条是纯 CSS 模拟动画不代表真实加载进度。真正控制切屏的是服务器端发送的事件如果推送这条事件的脚本时机偏晚或者压根没推玩家就会在 100% 进度条下干等。解决先确认加载页是否正确收到底层推送的切屏指令。可以在 JS 端加一行临时日志把收到的event.data打印到控制台看是否出现代表加载完成的动作字段。如果没有那就是数据链路问题检查服务端资源是否在正确时机调用推送接口有些环境需要显式在SendLoadscreenMessage之前等待资源加载完成。5.3 4K 屏幕上卡片被横向拉长比例不对现象在普通 1080p 屏上布局正常的页面换到 4K 或带鱼屏后卡片宽度过大文字间距变得稀疏。原因Flexy 如果给.loadscreen-card写死了百分比宽度或者完全依赖vw单位高分辨率下内部文本行宽会被放大排版就失去了约束。解决给卡片补max-width并用clamp()控制标题字号。.loadscreen-card { width: min(92vw, 440px); } .server-title { font-size: clamp(20px, 3vw, 32px); }min(92vw, 440px)的意思是宽度取 92% 视口宽和 440px 两者中较小的值这样小屏不溢出、大屏不拉伸。clamp()则是把字号限制在最小值和最大值之间避免 4K 屏上把标题放得过大。这种写法比单纯写死px更适配多种分辨率。5.4 背景图太大加载屏卡在首帧现象背景图明显出现渐进式显示图片加载完之前进度条和文字已经出来了整体视觉很“脏”。原因背景图如果是未压缩的jpg且分辨率随意拉到 4K 原图单张可能超过 8MB。加载屏幕需要快速显示这 8MB 成了最大的性能瓶颈。解决先把图片压缩到 1920×1080 左右再转成webp格式体积通常能降到原来的三分之一。Flexy 这类模板对背景图格式没有严格限制CSS 里background: url(...)直接用webp是完全可行的。如果你需要支持极老版本的 CEF可以保留jpg作为兜底但正常版本下webp更划算。5.5 中文字体显示为方块或默认字体品牌感全无现象标题和提示文字变成了系统默认字体和设计稿里的字体完全不搭。出现在英文环境下时中文直接显示为“豆腐块”。原因加载屏幕的 HTML 里若引用了云端字体比如Google Fonts或 CDN 字体服务玩家网络不稳定时字体加载失败浏览器只能回退到系统字体。本地部署时如果字体文件没有放进资源且没有在files{}中列出同样会加载失败。解决把字体文件放到资源目录下比如fonts/NotoSansSC.woff2在 CSS 里用font-face声明本地路径并在fxmanifest.lua的files{}中加入该文件。注意路径别写成C:/...这种绝对路径要使用相对路径。如果你使用的中文字体文件太大可以做子集化处理只保留服务器名字符范围内的字形体积能从几 MB 降到几百 KB。6. 最后一步本地调试、切屏验证与资源降级6.1 本地直接打开 index.html 的一种验证法Flexy 的页面本质是一个纯前端页面所以在本地用浏览器直接打开index.html能看到布局和动效。只是你只能验证视觉部分message事件收不到服务器的推送数据玩家数、服务器名这些区域会保持初始占位文本。我一般会做一个快速视觉核查确认背景图正常、转圈动画平滑、进度条手感合适然后就直接丢到服务器上做真机验证不再浪费时间在本地折腾数据对接。6.2 资源降级与切屏验证上线前更关键的一步是验证加载屏幕“会不会挡道”。有些服务器把加载屏幕做成常驻页面结果玩家进服后界面迟迟不消失体验非常差。关于接入和启动我的建议是加入一段简单的降级逻辑如果加载页在预期时间内没有收到任何服务器消息就自动显示默认文本避免出现一个空壳页面。如果你真正意识到这一点可以在 JS 里设置一个超时定时器比如 10 秒内没收到推送就显示备用的静态信息。这个兜底虽然简单但能避免最尴尬的“黑屏加载页”。我自己的习惯是每次改完 Flexy 都会强制走一遍这三步本地打开页面看视觉是否有明显问题上服务器后观察控制台有无资源加载报错最后在玩家视角真实进入一次游戏确认切屏没有卡顿。这三步很基础但踩过几次隐藏的坑后我意识到正是这些基础步骤能拦住大多数问题。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/13 15:32:33 · 阅读 1.2k CSS Flexbox改造FiveM加载屏：从Flexy结构到部署避坑
简介Flexy-Loading-Screen-FiveM 是一套为 FiveM 游戏服务器量身打造的加载屏幕定制项目主要面向希望提升服务器界面质感的管理员。方案借助 CSS 动画、渐变与字体排版将原本简单的等待页面改造为动态的品牌展示窗口有助于降低玩家等待时的枯燥感。资源包共 21 个文件压缩后约 2.75MB内部通过 HTML 构建页面骨架CSS 完成视觉样式与动效JavaScript 支持交互逻辑Lua 负责服务端资源加载同时包含 woff/woff2 字体、OGG 背景音乐、PNG 图标等媒体素材其中字体覆盖多种字重以适配不同显示场景音乐文件可作为加载背景音图标则用于展示服务器标识。从结构、样式到媒体资源这套文件组合构成完整的启动界面并附有 README 说明方便具备一定前端基础的管理员快速部署与二次开发管理员可自行调整配色、文字、动画节奏与背景音乐让加载界面更贴合社区主题。目前已有 154 人学习对于希望低成本强化加载体验、塑造服务器专属视觉风格的用户来说是一份轻量且实用的参考方案。1. 一个 CSS 驱动的 Flexy 加载屏幕凭什么让 FiveM 玩家多等十秒也愿意做过 FiveM 服务器维护的人都有同感默认加载界面黑底白字玩家进服前那 5 到 10 秒是最容易流失的窗口期。Flexy-Loading-Screen-FiveM 就是干这个的——用纯 CSS Flexbox 排版把服务器 Logo、进度条、在线人数、公告文本推到同一屏让加载过程从“干等”变成“看板”。资源本体不依赖复杂后端一个fxmanifest.lua、一个index.html加一份 CSS 主样式就能跑起来。适合两类人想快速替换默认加载页的服务器主以及想学 CEF 前端布局的模组开发者。我拆这个资源时最直接的感受是布局本身不难难的是全套文件之间的路径关联与数据对接坑基本集中在 CSS 文件引用和 JS 消息格式上。2. 拆开看 Flexy 的结构文件清单与 CSS 布局原理先说结论Flexy 这类资源之所以叫“Flexy”是因为页面骨架完全围绕 CSS Flexbox 排版展开——外层容器负责垂直居中子容器负责信息分组进度条和旋转动画再各自占一层视觉空间。理解这份资源不需要先懂 FiveM 的脚本 API先把文件归属和 flex 容器关系理顺后面改样式才不会动一处碎一片。2.1 四件套文件清单fxmanifest 管注册、HTML 管骨架、CSS 管布局、JS 管数据FiveM 资源要能被服务器识别必须在资源目录里放一个fxmanifest.lua。Flexy 的标准目录结构通常是这样的flexy-loading-screen/ ├── fxmanifest.lua ├── index.html ├── css/ │ └── flexy.css ├── js/ │ └── flexy.js └── img/ ├── logo.png └── background.jpg这个排列是加载屏幕类资源通用的目录习惯Flexy 沿用的也是同一套。fxmanifest.lua里的关键配置如下-- fxmanifest.lua fx_version cerulean game gta5 loadscreen index.html loadscreen_manual_http false files { index.html, css/flexy.css, js/flexy.js, img/logo.png, img/background.jpg }这里每个字段都有明确职责。fx_version cerulean声明使用新版资源格式game gta5告诉运行时这份资源挂在哪个游戏环境上。loadscreen index.html是加载屏幕的入口开关而loadscreen_manual_http false则决定静态文件以自动方式提供给浏览器。files{}里列出的每个文件都是在页面加载时允许被浏览器访问的白名单。这里有个容易忽略的细节点loadscreen_manual_http如果改成trueFlexy 页面就必须自己通过 HTTP 请求去拉取所有静态资源意味着你要额外提供一个能访问的 Web 服务。常规部署推荐保持false除非你确实需要把背景、字体等资源放到独立服务器上做 CDN 分发。新手配置时最常翻车的就是files{}列表和 HTML 实际引用的文件对不上导致加载屏幕白屏。后面避坑章节会专门展开。2.2 Flex 布局三板斧容器居中、卡片分区与子项间距Flexy 的 CSS 核心逻辑上落在三个能力上全屏居中、弹性子项、间距控制。先看一段最基础的样式/* css/flexy.css */ html, body { height: 100%; margin: 0; background: url(../img/background.jpg) center/cover no-repeat; font-family: Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; } .loadscreen-wrap { display: flex; justify-content: center; align-items: center; height: 100vh; } .loadscreen-card { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 400px; padding: 24px 32px; background: rgba(15, 15, 20, 0.72); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); }代码逻辑很直白.loadscreen-wrap用display: flex配合justify-content: center和align-items: center让内部卡片在任意分辨率下都保持水平垂直居中。.loadscreen-card再把方向切换成column让 Logo、进度条、文本信息从上到下排列gap: 12px控制子项间距。一个值得注意的选择为何要用gap而不是传统margin因为 Flex 容器内用margin-top做间距时相邻元素的上下边距容易叠加出视觉不一致而gap是 Flexbox 与 Grid 原生支持的间距属性像这样统一隔离子项后续新增元素时不用手动补 margin。Flexy 的资源里大量使用这种做法这比早期加载屏样式里“每个子项各写一个 margin”的维护成本低得多。如果你想让卡片在更宽的屏幕上不显得过于横向拉伸可以顺手补一句max-width: 420px;。Flex 布局的优点是容器宽度不再依赖精确像素——当然Flexy 作为模板也保留了固定宽度的兼容写法方便快速对齐设计稿。2.3 动效与进度条纯 CSS 模拟加载状态的可行边界Flexy 的进度条和旋转动画不需要 JavaScript 逐帧驱动用 CSS 就能跑得足够顺。下面这段就是常见的旋转等待器和进度条样式.spinner { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: #00b4ff; border-radius: 50%; animation: spin 1.2s linear infinite; } keyframes spin { to { transform: rotate(360deg); } } .progress-track { width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #00b4ff, #3affc3); transition: width 0.4s ease; }.spinner的动画原理是利用 border 的透明部分与顶部边框颜色不同再通过rotate不断旋转形成一个视觉上不间断的圆环转圈效果。进度条则分两层外层.progress-track是轨道内层.progress-fill是填充块宽度从 0% 到某个终值的变化由 JS 端接收服务器数据后更新style.width来完成。这里要给一个明确的边界提醒Flexy 这类模板的进度条绝大多数是“模拟进度”并不代表 FiveM 底层真实的资源加载完成度。服务器端真正切换场景时会通过事件通知页面隐藏或跳转而不是等进度条走满。所以你在改样式时不要指望 CSS 进度条和实际游戏加载进度严格同步——它更多是承担“给玩家一个视觉反馈”的任务。如果你需要真实的加载进度那得额外对接 FiveM 的加载事件而不是靠这个模板自带的动画。3. 接到 FiveM 服务器上安装流程、fxmanifest 模式与数据通道3.1 安装五步走目录放置、启动顺序与验证方法Flexy 的安装本质上就是一次标准 FiveM 资源部署。整个流程可以收敛成五步每步都有明确的检查点。第一步把解压后的整个flexy-loading-screen目录放进服务器的resources目录下。注意目录层级别把文件直接散在resources根目录否则运行时会找不到资源名。第二步确认fxmanifest.lua里的loadscreen index.html指向的页面文件名与实际一致大小写也严格区分。第三步修改服务器主配置server.cfg在ensure行里加载这个资源顺序一般放在基础框架之后即可ensure flexy-loading-screen第四步启动服务器。如果是热重载可以在控制台执行restart flexy-loading-screen观察是否有报错。第五步验证生效正常进入服务器在连接阶段停留几秒如果看到的是 Flexy 的卡片式加载页并且服务器名、Logo 正常显示就说明安装成功。这里的启动顺序有一个实践上的偏好我会把加载资源放在ensure列表比较靠前的位置像这样确保它在玩家连接阶段就已启动。如果放在某个大资源后边理论上不影响功能但服务器控制台报错时不容易定位是“加载屏幕没起来”还是“后续资源把它覆盖了”。3.2 fxmanifest 两种模式loadscreen_manual_http 的 false 与 true很多人在配置 Flexy 时会忽略loadscreen_manual_http这个开关实际上它决定了页面静态文件的获取路径。两种模式的差异可以列出一个小对比配置值文件来源适用场景注意点false运行时自动提供files{}列表中的文件绝大多数单机部署、小规模服务器不需要额外 Web 服务路径必须与files{}严格一致true页面自行请求外部 URL文件分发到独立服务器、CDN、大规模集群需要在 HTML 里改绝对地址配置成本高一个层级如果设为trueFlexy 的index.html里就再也不应该出现css/flexy.css这类相对路径而是要改成https://你的域名/flexy/css/flexy.css。这种做法的好处是文件可以由 CDN 缓存减轻游戏服务器带宽压力坏处是需要额外维护一个静态站点且一旦域名或路径变更玩家会直接看到损坏的页面。日常使用我建议保持默认的false。Flexy 的文件列表很小几张图、一个 CSS、一个 JS直接由运行时提供是最省事、也最少翻车的路径配置方式。3.3 JS 端与 Lua 端的数据对接message 事件与 JSON 约定加载屏幕页面本身不执行 FiveM 的 Lua 脚本它运行在 CEF 浏览器环境里只能通过浏览器的标准机制接收消息。Flexy 的数据链路是典型的前后端分离服务端 Lua 负责收集数据并推送JS 端注册message事件监听。先看服务端推送侧的一个示意写法-- server.lua 或集成在 fxmanifest 声明的 server_script 中 local payload json.encode({ action serverInfo, name GetConvar(sv_hostname, Default Server), players GetNumPlayerIndices(), max GetConvarInt(sv_maxclients, 32) }) SendLoadscreenMessage(payload)这段代码先组装 JSON 结构json.encode保证传输的数据不会出现编码歧义再通过SendLoadscreenMessage推送到加载屏页面。不同资源对推送时机的处理不同有的是循环发送有的是在玩家连入时发一次。你可以根据服务器在线人数是否需要实时变化来决定循环间隔常见做法是每秒推送一次。再看 JS 接收侧// js/flexy.js window.addEventListener(message, function (event) { const data event.data; if (!data || typeof data ! object) return; if (data.action serverInfo) { document.getElementById(server-name).textContent data.name; document.getElementById(player-count).textContent data.players / data.max; } });JS 端的逻辑并不复杂监听message事件取出event.data判断action字段后分别填入页面元素。这里请特别注意Flexy 模板对消息格式有约定action字段的取值必须和 JS 端判断保持一致否则数据到了页面也不会显示。改动字段名时两端要一起改这是资源调整时最常遇到的“黑匣子”问题。如果你自己写数据推送建议保持一个字段只负责一件事动作走action内容走内容字段不要混在一个层级里。Flexy 这个约定本身是干净的但很多人在二次开发时往里塞数组、嵌套对象导致 JS 端解析时越写越长最后干脆退回最简结构。4. 定制成自家的风格CSS 变量换皮、布局微调与速度节奏4.1 CSS 变量做主题换肤一处改色全站生效Flexy 如果在样式表里大量使用硬编码颜色每次换主题就得全局搜索替换。更好的做法是把所有关键颜色收敛成 CSS 变量这也是许多加载屏幕资源在更新后采用的方式。:root { --color-primary: #00b4ff; --color-glow: #3affc3; --color-bg: #0d0d0d; --color-text: #f5f5f7; --font-family: Segoe UI, PingFang SC, sans-serif; } .loadscreen-card { background: rgba(15, 15, 20, 0.78); border: 1px solid rgba(255, 255, 255, 0.06); } .server-title { color: var(--color-text); } .spinner { border-top-color: var(--color-primary); } .progress-fill { background: linear-gradient(90deg, var(--color-primary), var(--color-glow)); }改动主题时你只需要覆盖:root里的变量比如把--color-primary从蓝色换成服务器主题的橙红色进度条和转圈动画会同步变色不用逐条去翻选择器。这种做法的收益在后期维护时特别明显你不是在“改样式”而是在“换主题”。如果你想把换肤能力暴露给不懂 CSS 的维护者可以在 CSS 文件顶部留一段注释写清楚每个变量控制的是哪一块视觉区域。Value 型变量收敛到位后整个资源的外观维护就变成改几行变量的问题而不是频繁翻找样式代码。4.2 文本与 Logo 的 Flex 对齐策略Flexy 的信息区通常由 Logo、服务器名、在线人数、进度条四个模块组成。这些模块在水平或垂直方向的对齐策略直接决定观感。常见做法是全部垂直居中保持卡片视觉重心稳定如果你想让文本左对齐而进度条撑满宽度则需要给不同子项设置独立的align-self。.logo-row { display: flex; align-items: center; gap: 8px; } .info-left { align-self: flex-start; text-align: left; } .progress-track { width: 100%; }这里有个细节.progress-track设置width: 100%后它的宽度是相对父容器.loadscreen-card的而不是相对屏幕。如果你在更外层的容器里也用了display: flex则要确认内层宽度不会被压缩。一个隐藏得很深的 flex 陷阱是Flex 子项的默认min-width: auto会导致大段文本把卡片撑破稳妥的做法是给可能超长的文本容器补一句min-width: 0。.server-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }这套组合能让过长的服务器名变成省略号结尾而不是把布局挤歪。Flexy 这类模板默认不开启文本截断你实际部署时服务器名一旦过长布局就会“炸”得很难看。我通常会把这个习惯写进自己的改版清单每次拿到新加载屏都先查一遍文本溢出。4.3 动效节奏animation 时长、缓动曲线与逐帧开销转圈动画的时间、进度条过渡的缓动曲线都可以单独调。下面是几个常用参数的修改位置.spinner { animation-duration: 0.9s; /* 旋转一圈耗时数值越小越急促 */ animation-timing-function: linear; /* 保持匀速才符合转圈物理感 */ } .progress-fill { transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); }animation-duration调整转速0.9 秒一圈比默认的 1.2 秒显得更有“加载中”的紧迫感但也容易造成烦躁0.6 秒以下不适合长时间停留。cubic-bezier(0.22, 1, 0.36, 1)是带有“先快后慢”效果的缓动曲线和纯线性对比进度条从 0% 推进到 70% 会更有呼吸感。动效不是越多越好。背景图缓慢放大这类效果虽然好看但在低端机上会占用 GPU 合成资源甚至拖慢播放入场。加载屏幕本身是在玩家进服前的关键阶段运行动画掉帧会让玩家觉得服务器“卡”。我一般会限制同时运行的动画不超过三个进度条、旋转器、一个背景缓慢缩放。其余花哨效果都减掉确保加载过程本身不成为一个负担。5. 上线避坑五个常见的 Flexy 故障与排查5.1 进入服务器时白屏加载页完全没出现现象连接后玩家看到的是空白页面没有背景图没有文字也没有任何报错弹窗。原因最常见的是files{}列表与实际引用的文件不一致。HTML 里写了css/flexy.css但fxmanifest.lua的列表里漏了这行或者文件名大小写不同。CEF 拿不到资源时不会弹窗提醒而是直接在控制台输出 404 错误屏幕上就是白板。解决打开服务器控制台查看资源加载日志或者直接在浏览器环境里打开页面调出开发者工具抓网络请求。只要看到Failed to load resource就对照files{}逐项补齐。处理完改一行restart不生效再检查loadscreen入口文件名是否一致。5.2 进度条显示 100% 但迟迟不进入游戏现象加载屏幕的元素都正常显示进度条冲顶玩家却卡在加载界面好几秒才切入游戏。原因Flexy 的进度条是纯 CSS 模拟动画不代表真实加载进度。真正控制切屏的是服务器端发送的事件如果推送这条事件的脚本时机偏晚或者压根没推玩家就会在 100% 进度条下干等。解决先确认加载页是否正确收到底层推送的切屏指令。可以在 JS 端加一行临时日志把收到的event.data打印到控制台看是否出现代表加载完成的动作字段。如果没有那就是数据链路问题检查服务端资源是否在正确时机调用推送接口有些环境需要显式在SendLoadscreenMessage之前等待资源加载完成。5.3 4K 屏幕上卡片被横向拉长比例不对现象在普通 1080p 屏上布局正常的页面换到 4K 或带鱼屏后卡片宽度过大文字间距变得稀疏。原因Flexy 如果给.loadscreen-card写死了百分比宽度或者完全依赖vw单位高分辨率下内部文本行宽会被放大排版就失去了约束。解决给卡片补max-width并用clamp()控制标题字号。.loadscreen-card { width: min(92vw, 440px); } .server-title { font-size: clamp(20px, 3vw, 32px); }min(92vw, 440px)的意思是宽度取 92% 视口宽和 440px 两者中较小的值这样小屏不溢出、大屏不拉伸。clamp()则是把字号限制在最小值和最大值之间避免 4K 屏上把标题放得过大。这种写法比单纯写死px更适配多种分辨率。5.4 背景图太大加载屏卡在首帧现象背景图明显出现渐进式显示图片加载完之前进度条和文字已经出来了整体视觉很“脏”。原因背景图如果是未压缩的jpg且分辨率随意拉到 4K 原图单张可能超过 8MB。加载屏幕需要快速显示这 8MB 成了最大的性能瓶颈。解决先把图片压缩到 1920×1080 左右再转成webp格式体积通常能降到原来的三分之一。Flexy 这类模板对背景图格式没有严格限制CSS 里background: url(...)直接用webp是完全可行的。如果你需要支持极老版本的 CEF可以保留jpg作为兜底但正常版本下webp更划算。5.5 中文字体显示为方块或默认字体品牌感全无现象标题和提示文字变成了系统默认字体和设计稿里的字体完全不搭。出现在英文环境下时中文直接显示为“豆腐块”。原因加载屏幕的 HTML 里若引用了云端字体比如Google Fonts或 CDN 字体服务玩家网络不稳定时字体加载失败浏览器只能回退到系统字体。本地部署时如果字体文件没有放进资源且没有在files{}中列出同样会加载失败。解决把字体文件放到资源目录下比如fonts/NotoSansSC.woff2在 CSS 里用font-face声明本地路径并在fxmanifest.lua的files{}中加入该文件。注意路径别写成C:/...这种绝对路径要使用相对路径。如果你使用的中文字体文件太大可以做子集化处理只保留服务器名字符范围内的字形体积能从几 MB 降到几百 KB。6. 最后一步本地调试、切屏验证与资源降级6.1 本地直接打开 index.html 的一种验证法Flexy 的页面本质是一个纯前端页面所以在本地用浏览器直接打开index.html能看到布局和动效。只是你只能验证视觉部分message事件收不到服务器的推送数据玩家数、服务器名这些区域会保持初始占位文本。我一般会做一个快速视觉核查确认背景图正常、转圈动画平滑、进度条手感合适然后就直接丢到服务器上做真机验证不再浪费时间在本地折腾数据对接。6.2 资源降级与切屏验证上线前更关键的一步是验证加载屏幕“会不会挡道”。有些服务器把加载屏幕做成常驻页面结果玩家进服后界面迟迟不消失体验非常差。关于接入和启动我的建议是加入一段简单的降级逻辑如果加载页在预期时间内没有收到任何服务器消息就自动显示默认文本避免出现一个空壳页面。如果你真正意识到这一点可以在 JS 里设置一个超时定时器比如 10 秒内没收到推送就显示备用的静态信息。这个兜底虽然简单但能避免最尴尬的“黑屏加载页”。我自己的习惯是每次改完 Flexy 都会强制走一遍这三步本地打开页面看视觉是否有明显问题上服务器后观察控制台有无资源加载报错最后在玩家视角真实进入一次游戏确认切屏没有卡顿。这三步很基础但踩过几次隐藏的坑后我意识到正是这些基础步骤能拦住大多数问题。希望帮到你。本文还有配套的精品资源点击获取