loading-web

• 浏览器端Loading效果插件，< 2kb(gzip)大小，无依赖；
• 支持HTTP和Router自动Loading效果；
• 支持自定义Loading。

Install

• $ npm i loading-web

Usage

• 自动拦截HTTP请求

import { xhrResponder } from "loading-web"
// options参数可选
xhrResponder(options)

• Router跳转时Loading效果

import { routerResponder } from "loading-web"
// options参数可选
routerResponder(options)

• 使用内置Loading样式

import "loading-web/css3" // css1 ~ css8

• 全局配置内置Loading样式

:root {
    --loading-color: 25 137 250;
    --loading-size: 10px;
    --loading-bg: transparent;
    --loading-zIndex: 2;
}

• 自定义Loading样式

<style>
    .loader {
        // 此处自定义样式
    }
</style>

• 指定Loading挂载元素

ajax({url:"xxx?to=#id"})
ajax({url:"xxx?to=.class"})
pushState({}, "", "target.html?to=body")
pushState({to: "body"}, "", "target.html")

• 指定本次请求忽略Loading

ajax({url:"xxx?ig"})

• 手动调用Loading

import { loader } from "loading-web"
// options参数可选
loader(() => code, options)

或

import { loader } from "loading-web"
// options参数可选
const to = loader.show(options)
loader.hide(to)

• options数据结构

interface ILoadingOptions {
    to: keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap | string // 默认为body
    size?: string
    color?: string // #1989fa
    zIndex?: number
    bg?: string

    layerStyle?: string
}