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

?

轉載于:https://www.cnblogs.com/tincyho/p/7280945.html

總結

以上是生活随笔為你收集整理的加载数据时，页面显示正在加载的动画，支持移动端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。