續上篇 Day14，本篇素材使用Day5和Day13 Mask

進度條可以直接取用loader.progress的參數進行計算，進度條沿用之前的mask篇，讓背景圖片做移動，所以先將背景歸0，並且增加一個data紀錄進度條跑到哪

let now = 0;
bg.x = 0;

進度條下面會跑％數，所以我們還需要一個text

let text = new PIXI.Text(now, {
  fontSize: 24,
  fill: 0xffffff
});

定義一個function來做進度條的動畫
loader.progress是0~100，以下除以一百拿來算百分比

function loadingHandler(){
    let loadingWidth = 400; //範例進度條寬度400
    let once = loadingWidth / 100; //每1%跑多少距離
    let limit = loader.progress / 100 * loadingWidth //目前最多跑到哪

    if(bg.x < limit){
      anim.x += once;
      bg.x += once;
      now < limit ? now++ : limit;
    }
    text.text = now + '%';
  }

最後在ticker裡放入就可以啦

app.ticker.add(delta => {
    loadingHandler();
});