Framework7 加载指示符（Preloader）使用说明

Framework 7 提供了一个好用的加载指示符（Preloader），一个不断旋转的菊花状环形进度条。当我们页面需要加载数据，或者执行比较费时的操作时可以使用。
而且这个加载指示符是使用 SVG 绘制，并使用 CSS 来进行动画，所以可以很方便的改变它的大小。

1，加载指示符的使用

2，修改加载指示符的大小和颜色
（1）加载指示符有2个颜色供选择：其中一个颜色是配合亮色背景（默认样式），另一个颜色配合暗色背景。
（2）要改变大小，只要直接设置 width、height 样式属性即可。

  ...
 

3，使用模态的方式显示加载指示符
上面的样例是直接将加载指示符放置在页面上。我们也可以通过 js 将其通过模态的方式自动显示在页面上。（既然是模态的，说明在加载指示符显示的时候我们是不可以进行任何操作的。）
比如我们可以在加载数据的时候将其弹出显示，告知用户当前正在加载。当加载完毕后自动将其关闭。
（1）样例效果图
点击链接后，在页面中央显示加载指示符。过个两秒，加载指示符自动消失。
原文:Framework7 - 加载指示符（Preloader）使用说明

（2）html页面代码

  ...
 

（3）js代码

$$('.open-indicator').on('click', function () {
  myApp.showIndicator();
  setTimeout(function () {
      myApp.hideIndicator();
  }, 2000);
});

4，Ajax请求时自动显示加载提示符

App 中如果有很多页面都有数据请求，要是每个请求都像上面一样都要手动添加代码显示、隐藏加载提示符。会略显麻烦。
我们可以在 Framework7 初始化的时候对 Ajax 请求进行拦截，进行统一处理。即发起请求时显示加载提示符，请求完毕后隐藏加载提示符。

// 初始化 app
var myApp = new Framework7({
          // ajax请求开始
          onAjaxStart: function (xhr) {
            myApp.showIndicator();
          },
          // ajax请求完毕
          onAjaxComplete: function (xhr) {
            myApp.hideIndicator();
          }
});