JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 16
  • Score
    100M100P100Q45207F
  • License ISC

Package Exports

  • @eightfeet/loading
  • @eightfeet/loading/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@eightfeet/loading) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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