一：圖標型加載指示器

這種指示器作為一個圖標內嵌到頁面中，用於顯示耗時到加載操作。

      <!-- 默認加載器 -->
        <span class="preloader"></span>
      <!-- 白色加載器，另加"preloader-white"類 -->
        <span class="preloader preloader-white"></span>
      <!-- 自定義尺寸的默認加載器 -->
        <span style="width:42px; height:42px"
 
 class="preloader"></span>
      <!-- 自定義尺寸的白色加載器 -->
        <span style="width:42px; height:42px" class="preloader preloader-white"></span>

二：彈窗型加載指示器

1:預加載彈窗

$$(‘preloader‘).on(‘click‘, function () {
    myApp.showPreloader(‘預加載標題‘)//顯示預加載彈窗
    setTimeout(function () {
        myApp.hidePreloader();
    }, 延時);
 
//延時關閉預加載彈窗
}); 

2:指示器彈窗

$$(‘.indicator‘).on(‘click‘, function () {
    myApp.showIndicator();//顯示指示器
    setTimeout(function () {
        myApp.hideIndicator();
    }, 延時);//隱藏指示器
});

預加載與指示器的區別：

預加載由“標題+指示器”組成，標題作為提示信息。

指示器則只有一個加載動畫，沒有文字提示。

Framework7學習筆記之 加載指示器