加載數據時，頁面顯示正在加載的動畫，支持移動端

最近在使用ionic3做一個移動端APP，在用戶網絡環境差的時候，查詢數據會比較慢，這個時候需要模擬其他成熟的APP給頁面上加入一個加載的動畫。由於一開始我不知道ionic3本身已經提供了一套組件，所以自己先做了一套樣式。提供給不用框架的同學們參考和交流。

話不多說，直接上代碼：

HTML:

<div #modal class="modal">
  <div class="little-square">
    <div class="outer">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </div>
</div>

SASS:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #333;
  z-index: 999;
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
  .little-square {
    background: #fff;
    width: 17vw;
    height: 17vw;
    display: flex;
    justify-content: center;
    align-items: center;
    .outer {
      width: 16vw;
      height: 16vw;
      position: relative;
      animation: moveover 2s ease-out infinite;
      .box1 {
        position: absolute;
        width: 8vw;
        height: 16vw;
        border-radius: 8vw 0 0 8vw;
        background: linear-gradient(#444, #999);
        z-index: 2;
      }
      .box2 {
        position: absolute;
        width: 8vw;
        height: 16vw;
        border-radius: 0 8vw 8vw 0;
        left: 50%;
        background: linear-gradient(#eee, #999);
        z-index: 1;
      }
      .box3 {
        position: absolute;
        width: 12vw;
        height: 12vw;
        top: 2vw;
        left: 2vw;
        border-radius: 50%;
        background: #fff;
        z-index: 3;
      }
    }
  }

TS:

//點擊某個按鈕之后，調用遮罩層，顯示其中動畫
this.modal.nativeElement.className = "show modal";
    AJAX代碼執行片斷{
    。。。。。。。。
    //AJAX代碼執行完，最后一句加入隱藏遮罩層
    this.modal.nativeElement.className = "destroy";
    }