Loading模块,需要promise polyfill demo
参数 | 说明 | 是否必填 | 备注 | 类型 |
---|---|---|---|---|
id | 所创建Loading的id | 否 | 不传可自动生成id(Loading + 时间戳 + 100以内的随机数) | String |
zIndex | loading的样式层级关系 | 否 | 默认10000 | Number |
emBase | em单位的基准像素 | 否 | 默认自动计算(emBase = document.clientWidth/24) | Number |
parentId | 所挂载的父级ID用于做局部Loading | 否 | 默认挂在body下面,指定父级dom时将挂载在父级dom下,配合css实现局部loading | String |
cycleTime | 旋转周期 | 否 | 默认0.5s | Number |
style | Loading样式 | 是 | 定义loading样式 { overlay: 覆盖层, content: 内容区, vertices: loading阵列元素点样式 留意其中特殊属性见下表, } |
Object |
length | loading组成圈的元素个数 | 否 | 默认12个 |
parpme中style特殊属性
属性 | 说明 | 类型 |
---|---|---|
animationDuration | 动画时间,可覆盖 parame中的cycleTime参数 | Number |
size | loading的直径大小 | Number |
elements | loading由几个元素点组成,可以是Number类型也可以是Array类型, Number类型时,可覆盖 parame中的length参数; Array类型时, 1、数组元素可以为一组不同颜色值,loading组成的阵列元素将以每个元素的颜色值排列 2、数组的长度(Array.length) 将会覆盖parame中的length, |
Number/Array |
显示页面Loading,如果创建的Loading隐藏时,调用此方法显示Loading。
为了保证页面中loading只有一个,使用计数器控制loading的显示,loading.show()时计数器加一,loading.hide()时计数器减一,loading.reset() 用于重置loading计数器,loading计数器错乱是调用重置到零。
import Loading from '@eightfeet/loading';
var newLoading = new Loading({
length: 50, // 由几个vertices组成默认12个
cycleTime: 1,
parentId: 'parentId',
style: { // 定义样式 {overlay: 覆盖层, content: 内容区, vertices: 组成节点}
overlay: {
backgroundColor: 'rgba(0,0,0,0)'
},
content: {
backgroundColor: 'rgba(0,0,0,0)',
},
vertices: {
height: '0.5em',
width: '0.5em',
borderRadius: '1em',
backgroundColor: 'green',
animationDuration: 'green', // 动画周期
elements: ['red', 'green', 'yellow', 'orange', 'blue'],
size: '20px'
},
}
});
var btn = document.getElementById('example');
btn.onclick = function(){
newLoading.show();
}