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

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