加载动画
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：
- Mobilebone.showLoading
- Mobilebone.hideLoading
其中 showLoading 会在请求执行的时候执行，hideLoading 会在请求完毕的时候执行，因此，如果你自己有一套加载显示和隐藏方法，假设方法名是 myShowLoadingFunction 和 myHideLoadingFunction，则执行类似下面的代码就可以将 Mobilebone 自己的加载动画替换成开发者自己的。
/* 隐藏 Mobilebone 自己的加载动画 */
.mask { display: none; }
/* 替换成外部的加载动画 */
Mobilebone.showLoading = myShowLoadingFunction;
Mobilebone.hideLoading = myHideLoadingFunction;
发现错误？想参与编辑？在 GitHub 上编辑此页！