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); }
其他说明
- 中间的菊花永远居中
mask
遮罩元素显示的,所以,只要限定好mask
的大小和位置就可以了。 - 菊花效果CSS3编写,使用了currentColor关键字,因此,颜色跟随环境的
color
, 也就是可以使用color
属性任意控制。