web preloading animations

说明

默认情况下如果网站请求速度慢，所以会有一段时间的空白页面等等，用户体验效果不好，

见到很多的页面都有预加载的效果，加载之前先加载一个动画，后台进程继续加载页面内容，

当页面内容加载完之后再退出动画显示内容，这样的用户体验更好。

演示(demo1-demo9)

demo1

demo2

demo3

demo4

demo5

demo6

demo7

demo8

demo9

起步

• 安装 yarn/cnpm/npm

    yarn add lgh.preloading

    cnpm/npm install lgh.preloading --save

• 引入

配置项

• 引入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>

更新日志

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