加载数据时，页面显示正在加载的动画，支持移动端

最近在使用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";
    }