data-mask

ajax请求专用。如果a元素,或form元素,可以通过data-mask让loading效果出现在这些元素内部,而非全局body下,从而实现局部loading效果(默认是整页覆盖),可参见本文档点击任意左侧Ajax链接的效果。

<a href="Mobilebone.support.html" class="nav-a" data-mask data-rel="auto">Mobilebone.support</a>

可以直接data-mask或者data-mask="true". 如果是局部效果,需要你额外辅助一些CSS实现你需要的效果:

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

其他说明

  1. 中间的菊花永远居中mask遮罩元素显示的,所以,只要限定好mask的大小和位置就可以了。
  2. 菊花效果CSS3编写,使用了currentColor关键字,因此,颜色跟随环境的color, 也就是可以使用color属性任意控制。