# lgh.preloading

> 页面预加载动画

Latest version **1.0.0** (published 2018-07-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install lgh.preloading
pnpm add lgh.preloading
yarn add lgh.preloading
bun add lgh.preloading
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-07-12 |
| First published | 2018-07-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | lousanpang |
| Maintainers | lousanpang |

## Links

- npm: https://www.npmjs.com/package/lgh.preloading
- npm.io page: https://npm.io/package/lgh.preloading

## Recent versions

- 1.0.0 (latest) — 2018-07-12

## README

# web preloading animations

<br>
<br>

<div align="center" style="align:center; text-align:center; width:300px; height:300px; border:3px solid gray; margin: 0 auto;">
    <img style="width:250px; height:200px; margin-bootom:20px; margin-top:10px" src="https://github.com/LOUSANPANG/Picture-library/blob/master/Images/preloading.jpg">
</div>

<br>
<br>

## 说明
    默认情况下如果网站请求速度慢，所以会有一段时间的空白页面等等，用户体验效果不好，
    
    见到很多的页面都有预加载的效果，加载之前先加载一个动画，后台进程继续加载页面内容，
    
    当页面内容加载完之后再退出动画显示内容，这样的用户体验更好。

<br>
<br>

## 演示(demo1-demo9)

### demo1

<div align="center">
    <img src="https://github.com/LOUSANPANG/Picture-library/blob/master/Images/load-demo1.gif" width="300px" height="200px">
</div>

### demo2

<div align="center">
    <img src="https://github.com/LOUSANPANG/Picture-library/blob/master/Images/load-demo2.gif" width="300px" height="200px">
</div>

### demo3

<div align="center">
    <img src="https://github.com/LOUSANPANG/Picture-library/blob/master/Images/load-demo3.gif" width="300px" height="200px">
</div>

### demo4

<div align="center">
    <img src="https://github.com/LOUSANPANG/Picture-library/blob/master/Images/load-demo4.gif" width="300px" height="200px">
</div>

### demo5

<div align="center">
    <img src="https://github.com/LOUSANPANG/Picture-library/blob/master/Images/load-demo5.gif" width="300px" height="200px">
</div>

### demo6

<div align="center">
    <img src="https://github.com/LOUSANPANG/Picture-library/blob/master/Images/load-demo6.gif" width="300px" height="200px">
</div>

### demo7

<div align="center">
    <img src="https://github.com/LOUSANPANG/Picture-library/blob/master/Images/load-demo7.gif" width="300px" height="200px">
</div>

### demo8

<div align="center">
    <img src="https://github.com/LOUSANPANG/Picture-library/blob/master/Images/load-demo8.gif" width="300px" height="200px">
</div>

### demo9

<div align="center">
    <img src="https://github.com/LOUSANPANG/Picture-library/blob/master/Images/load-demo9.gif" width="300px" height="200px">
</div>

<br>
<br>

## 起步

* 安装 yarn/cnpm/npm

```
    yarn add lgh.preloading

    cnpm/npm install lgh.preloading --save
```

* 引入

<br>
<br>

## 配置项

* 引入HTML相对应DEMO(1-9)的类名

demo1

```
    <div id="loading">
		<div id="loading-center">
			<div id="demo1">
				<div class="demo1_object" id="demo1_object_one"></div>
				<div class="demo1_object" id="demo1_object_two"></div>
				<div class="demo1_object" id="demo1_object_three"></div>
				<div class="demo1_object" id="demo1_object_four"></div>
				<div class="demo1_object" id="demo1_object_five"></div>
				<div class="demo1_object" id="demo1_object_six"></div>
				<div class="demo1_object" id="demo1_object_seven"></div>
				<div class="demo1_object" id="demo1_object_eight"></div>
				<div class="demo1_object" id="demo1_object_big"></div>
			</div>
		</div>
	</div>
```

demo2

```
    <div id="loading">
		<div id="loading-center">
			<div id="demo2">
				<div class="demo2_object" id="demo2_first_object"></div>
				<div class="demo2_object" id="demo2_second_object"></div>
				<div class="demo2_object" id="demo2_third_object"></div>
			</div>
		</div>
	</div>
```

demo3

```
    <div id="loading">
		<div id="loading-center">
			<div id="demo3">
				<div class="demo3_object" id="demo3_object_one"></div>
				<div class="demo3_object" id="demo3_object_two"></div>
				<div class="demo3_object" id="demo3_object_three"></div>
				<div class="demo3_object" id="demo3_object_four"></div>
				<div class="demo3_object" id="demo3_object_five"></div>
				<div class="demo3_object" id="demo3_object_six"></div>
				<div class="demo3_object" id="demo3_object_seven"></div>
				<div class="demo3_object" id="demo3_object_eight"></div>
				<div class="demo3_object" id="demo3_object_nine"></div>
			</div>
		</div>
	</div>
```

demo4

```
    <div id="loading">
		<div id="loading-center">
			<div id="demo4">
				<div class="demo4_object" id="demo4_object_one"></div>
				<div class="demo4_object" id="demo4_object_two"></div>
				<div class="demo4_object" id="demo4_object_three"></div>
			</div>
		</div>
	</div>
```

demo5

```
    <div id="loading">
		<div id="loading-center">
			<div id="demo5">
				<div class="demo5_object" id="demo5_object_one"></div>
				<div class="demo5_object" id="demo5_object_two" ></div>
				<div class="demo5_object" id="demo5_object_three"></div>
				<div class="demo5_object" id="demo5_object_four"></div>
				<div class="demo5_object" id="demo5_object_five"></div>
			</div>
		</div> 
	</div>
```

demo6

```
    <div id="loading">
		<div id="loading-center">
			<div id="demo6">
				<div class="demo6_object" id="demo6_object_one"></div>
				<div class="demo6_object" id="demo6_object_two"></div>
				<div class="demo6_object" id="demo6_object_three"></div>
				<div class="demo6_object" id="demo6_object_four"></div>
				<div class="demo6_object" id="demo6_object_five"></div>
				<div class="demo6_object" id="demo6_object_six"></div>
				<div class="demo6_object" id="demo6_object_seven"></div>
				<div class="demo6_object" id="demo6_object_eight"></div>
			</div>
		</div>
	</div>
```

demo7

```
    <div id="loading">
		<div id="loading-center">
			<div id="demo7">
				<div class="demo7_object"></div>
				<div class="demo7_object"></div>
				<div class="demo7_object"></div>
				<div class="demo7_object"></div>
				<div class="demo7_object"></div>
				<div class="demo7_object"></div>
				<div class="demo7_object"></div>
				<div class="demo7_object"></div>
				<div class="demo7_object"></div>
				<div class="demo7_object"></div>
			</div>
		</div>
	</div>
```

demo8

```
    <div id="loading">
		<div id="loading-center">
			<div id="demo8">
				<div class="demo8_object" id="demo8_object_four"></div>
				<div class="demo8_object" id="demo8_object_three"></div>
				<div class="demo8_object" id="demo8_object_two"></div>
				<div class="demo8_object" id="demo8_object_one"></div>
			</div>
		</div>
	</div>
```

demo9

```
    <div id="loading">
		<div id="loading-center">
			<div id="demo9">
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
				<div class="demo9_object"></div>
			</div>
		</div>
	</div>
```

<br>
<br>

## 更新日志

`v 1.0.0` `18.7.12`  lgh.preloading publish (css/html)

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