转载 https://blog.csdn.net/kuokuo666/article/details/101018625
摘要
我们都知道 CocosCreator 打包 Web 端后会有一个黑黑的加载界面，而很多开发的小伙伴们是不太懂前端的。那么如何通过一篇文章快速学会定制页面呢？
正文
总览
在打包 Web 项目时，我们基本上都会选择手机端，我就拿手机端为例。
打包后，我们测试工程，加载页是这样的：
为什么会这样显示呢？让我们打开 build 目录看一下。你会发现你熟悉或者说你曾听说过的 html, css, js “三剑客”。html 负责显示的内容，css 负责内容的表现形式，js 脚本负责控制显示。
我们先看 html 中的显示内容部分。翻到45行，div 和 span 都是容器，内部有 id 与 class 用于标记。
位于最后层的背景以及图片就是一个 id=“splash” 的 div，然后是进度条背景 div，剩下的 span 容器就是进度条。
修改背景颜色与背景图
在 css 文件中的 84 行，定义了背景颜色与背景图。（# 这个符号，就是用于寻找对应 id）
我们将自己图片放入 build 文件夹，然后修改第 90 行的背景属性，颜色值与图片 url。
看看效果
加入文字
回到 html 文件中，删去进度条背景与进度条，加入 id=“label” 的 div，内容改为 0.00%。
唉？0.00%怎么跑到了最上边？因为我们还没有对其样式 css 进行书写。
让我们来到 css 文件中，删去 #splash 后面的部分，也就是进度条的部分。加入我们刚写的 label，如图。
距离顶部 top 为80%，本身高度为20%。这样就将位置设置好了。
修改脚本
让我们看看 main.js 脚本文件。
通过 id 获取到了 splash 然后再获取到进度条容器 progressBar。
随后在引擎加载资源的进度回调中动态的改变其 width，实现进度条。
那我们现在已经删去了进度条，改用文字代替加载进度，只要通过 id 来获取到容器，再动态修改文字内容即可。（innerHTML 为显示内容，可以理解成 CocosCreator 中 cc.Label 组件的 string）
最终效果（动图）
————————————————
版权声明：本文为CSDN博主「KUOKUO众享」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kuokuo666/java/article/details/101018625