## 加载动画

Mobilebone 自带建议的加载动画效果，如下所示。

### 时机

Mobilebone 加载动画只会在请求页面或者请求外部数据的时候触发，例如：

    <a href="detail.html?id=1">加载</a>

点击上面的链接，则 Mobilebone 就会去请求 `detail.html?id=1` 这个页面的数据，当请求执行的时候，加载动画就会出现，当请求结束的时候，加载动画就会消失。

### 原理

Mobilebone 默认的加载动画效果是通过创建如下所示的 HTML 结构实现的：

    <div class="mask"><s class="loading"></s></div>

其中，`'.mask'` 元素和 `'.loading'` 元素的样式如下：

    .mask {
    	height: 100%; width: 100%;
    	background-color: rgba(255,255,255,.35);
    	position: absolute; left: 0; top: 0;
    	z-index: 9;
    }
    s.loading {
        width: 16px; height: 16px;
        border-radius: 100%;
        border: 2px solid;
        border-bottom-color: transparent;
    	animation: spin 1s linear infinite;
    	/* center */
    	position: absolute;
    	top: 0; right: 0; bottom: 0; left: 0;
    	margin: auto;
    }

可见外部的`'.mask'` 元素是一个尺寸100%覆盖的带有白色半透明背景的定位层，内部的 `'.loading'` 元素是一个尺寸 `20px * 20px` 居中定位的环形物。

默认状态下，`'.mask'` 元素是被创建在 `<body>` 元素中的，因此，当请求发生的时候，会看到一个全屏白色半透明覆盖层，中间有个加载动画效果。

当然，加载动画的位置和样式都是可以设置的。

### 设置

#### 样式改变

如果嫌弃 Mobilebone 默认的加载动画效果很粗糙，则开发者可以自己修改 `./src/mobilebone.css` 中的相关样式。

#### 局部加载

如果嫌弃默认的全屏加载样式有些重，希望只在当前点击的按钮、或者列表上显示加载动画，则可以使用 `data-mask` 进行设置。例如：

    <a href="detail.html?id=1" data-mask>加载</a>

此时，`'.mask'` 元素就不会创建在 `<body>` 元素中，而是创建在上面这个 `<a>` 元素中。于是，加载动画效果就会出现在 `<a>` 元素的中心位置，会覆盖原本 `<a>` 中的文字内容。

如果希望加载动画是在文字的后面，而不是覆盖文字，则可以自己使用 CSS 代码重置下，例如本文档左侧的加载动画就使用了如下所示的 CSS 代码：

    .nav-a > .mask {
        display: inline;
        width: 26px; height: 31px;
        top: 0; right: 8px; left: auto;
        background-color: transparent;
        transform: scale(.75,.75);
    }

#### 冲突？

如果 `.mask` 类名和项目中其他样式发生冲突，则可以使用 Mobilebone.classMask 这个 API 进行重置，例如：

    Mobilebone.classMask = 'my-mask';

则 Mobilebone 就会创建类名是 `'.my-mask'` 的元素，当然，CSS 样式需要同步变更下，例如：

    .my-mask {}
    .my-mask > .loading {}

### 自定义

如果项目原本有一套自己的加载动画方案，Mobilebone 也是支持调用的，Mobilebone有如下两个匿名 API：

1. Mobilebone.showLoading
2. Mobilebone.hideLoading

其中 `showLoading` 会在请求执行的时候执行，`hideLoading` 会在请求完毕的时候执行，因此，如果你自己有一套加载显示和隐藏方法，假设方法名是 `myShowLoadingFunction` 和 `myHideLoadingFunction`，则执行类似下面的代码就可以将 Mobilebone 自己的加载动画替换成开发者自己的。

    /* 隐藏 Mobilebone 自己的加载动画 */
    .mask { display: none; }

    /* 替换成外部的加载动画 */
    Mobilebone.showLoading = myShowLoadingFunction;
    Mobilebone.hideLoading = myHideLoadingFunction;

发现错误？想参与编辑？在 GitHub 上编辑此页！