轉載 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