# loading-web

> web loading

Latest version **3.0.6** (published 2023-10-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install loading-web
pnpm add loading-web
yarn add loading-web
bun add loading-web
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.6 |
| Published | 2023-10-27 |
| First published | 2019-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | LFQ |
| Maintainers | lifuqiang |
| Keywords | loading |

## Links

- npm: https://www.npmjs.com/package/loading-web
- Repository: https://gitee.com/foruu/tools
- npm.io page: https://npm.io/package/loading-web

## Recent versions

- 3.0.6 (latest) — 2023-10-27
- 3.0.3 (beta) — 2023-09-14
- 3.0.5 — 2023-09-27
- 3.0.4 — 2023-09-26
- 3.0.2 — 2023-09-14
- 3.0.1 — 2023-06-19
- 2.0.10 — 2022-08-29
- 2.0.9 — 2022-08-05
- 2.0.8 — 2022-06-27
- 2.0.7 — 2022-06-23
- 2.0.6 — 2022-06-16
- 2.0.5 — 2022-06-15
- 2.0.4 — 2022-06-15
- 2.0.3 — 2022-06-06
- 2.0.2 — 2022-06-06
- … 2 more at https://npm.io/package/loading-web/versions

## README

### 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
}
```

---
_Source: https://npm.io/package/loading-web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._