1.用egret建立一個空的euigame專案；

2.點選f5執行空的專案[他自帶了一個載入的txt顯示]；

EE:資源太少，載入速度太快，童鞋們可能注意不到；

然後，我們在egretwing的資源路徑加如下倆資料夾；

loading【放載入介面用的圖片】和Pic【放測試loading用的亂七八糟的圖片(多複製一些)】

loading資料夾的loadbg是loading的背景圖片；

loadback是進度條的背景圖片；

loadfill是進度條圖片；

自己新建倆個資源組；並且將剛剛的檔案拖到對應資源組裡面；

3.製作自己的載入介面；

E:(1)在eui_skins資料夾下，興建LoadingSkin.exml樣式檔案，點選他；

(2)從左下角的控制元件位置，拖一個ProgressBar,設定好對應的引數，再拖一個Image作為背景[注意Image再bar前面]；

EE:自定loading條的大小長度等，請開啟eui.skins裡面ProgressbarSkin.exml修改；

對於ProgressBar的一些可以設定的屬性介紹：

 this.barid.maximum=100;//設定進度條的最大值
 this.barid.minimum=0;//設定進度條的最小值
 this.barid.width = 200;//設定bar寬

 this.barid.height = 40;//高

 this.barid.value = 0;//進度條初始值

對於顯示的label也在這裡；我們可以用他的也可以自定義；

4.找到載入對應的函式，將自定義的介面根據載入進度顯示；

EE:到src資料夾下開啟LoadingUI.ts指令碼；新增修改如下程式碼：

[新增修改的地方,博主已經做了註釋:]

//繼承改為eui.Component【可以自定義面板】
class LoadingUI extends eui.Component implements RES.PromiseTaskReporter {

    public constructor() {
        super();
        this.skinName="LoadingSkin";//指定好對應的面板名稱；
        this.createView();
       
    }
    barid:eui.ProgressBar;
    private textField: egret.TextField;

    private createView(): void {
        this.textField = new egret.TextField();
        this.addChild(this.textField);
        this.textField.y = 300;
        this.textField.width = 480;
        this.textField.height = 100;
        this.textField.textAlign = "center";
    }

    //egret載入進度回撥的函式
    public onProgress(current: number, total: number): void {
        this.textField.text = `Loading...${current}/${total}`;

        var fill=(current/total);//0,1之間
        this.barid.value=fill*100;//進度條顯示的進度控制
    }
}
 

5.設定Main.ts指令碼中的資源loading順序;

E:目的是讓load介面需要的資源,先load顯示出來，再控制其他資源繼續loading;

程式碼修改如下[意義參考註釋]：

6.儲存編譯執行，自定義的進度條介面出來了；

好了，白鷺自定義載入進度條介面 end.... ~ o(*￣▽￣*)o；