Loading

Loading模块，需要promise polyfill demo

parame

| 参数 | 说明 | 是否必填 | 备注 | 类型 | | --------- | ------------------------------- | -------- | ------------------------------------------------------------ | ------ | | 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 |

options

1. show: ƒ () 显示Loading

   显示页面Loading，如果创建的Loading隐藏时，调用此方法显示Loading。

2. hide: ƒ () 隐藏Loading

3. reset: ƒ () 重置Loading计数器

   为了保证页面中loading只有一个，使用计数器控制loading的显示，loading.show()时计数器加一，loading.hide()时计数器减一，loading.reset() 用于重置loading计数器，loading计数器错乱是调用重置到零。

case

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();
    }