fakeLoader页面加载前loading演示8种效果

Posted 2020-08-22

提高用户体验的插件fakeLoader页面加载前loading演示8种效果

 在线预览

下载地址

示例代码

<div id="main">
		<div class="demo">
			<a href="/api/jq/5733e326a88fd/index.html" class="cur">Spinner1
			</a>
			<a href="/api/jq/5733e326a88fd/demo2.html">Spinner2
			</a>
			<a href="/api/jq/5733e326a88fd/demo3.html">Spinner3
			</a>
			<a href="/api/jq/5733e326a88fd/demo4.html">Spinner4
			</a>
			<a href="/api/jq/5733e326a88fd/demo5.html">Spinner5
			</a>
			<a href="/api/jq/5733e326a88fd/demo6.html">Spinner6
			</a>
			<a href="/api/jq/5733e326a88fd/demo7.html">Spinner7
			</a>
			<a href="/api/jq/5733e326a88fd/demo8.html">自定义图片
			</a>
			<div class="result">DEMO1 页面内容已加载完毕。
			</div>
		</div>
	</div>
	<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js">
	</script>
	<script src="/api/jq/5733e326a88fd/fakeLoader.min.js">
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			$(".fakeloader").fakeLoader({
				timeToHide: 1200,
				bgColor: "#2ecc71",
				spinner: "spinner1"
			}
									   );
		}
						 );
	</script>