html5 页面加载loading 动画效果基于原生css3 javascript - html - 前端 - 技术设计

服务器配置或者网络等原因，若一个页面原本加载速度过慢，
或者 js css 加载完成初始化成功之前，页面先会暂时很扭曲，用户体验会很差。
就需要给 html5 页面加上一个加载中的 loading 动画。
我在百度找了十多种，都发现一个共同的问题，就是代码很牛，效果很好，就是不会用，
于是我找了一个完全是原生 JavaScript + CSS3 的方案，集成到 js 和 css 中来实现。
无需其他任何依赖，也不需要自己再实现代码。

本文并非原创，而是在别人的基础上，改进和封装了他的代码。
主要修改地方包括:

尽最大可能做到只需要在正确位置引入一个 js 和一个 css 即可。无需加入其他任何代码。
需要注意的是，为了更早加载完成 DIV#loader-wrapper，建议将 loading.js 放在 body 第一行。或者翻到下半页采取方案 2。
取消了原文通过 jquery 隐藏 load_title 的方案，直接在 css 142 行改进成结束 load_title 自己消失。

原文中举得例子：http://crusader12.com/C12HoverAlls/
参考的原文地址 : http://www.ibloger.net/article/401.html

正文开始
直接上代码：
loading.css (调整背景色代码在 103 行)

	.chromeframe {
	margin: .2em 0;
	background: #ccc;
	color: #000;
	padding: .2em 0
	}

	#loader-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999999
	}

	#loader {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #FFF;
	-webkit-animation: spin 2s linear infinite;
	-ms-animation: spin 2s linear infinite;
	-moz-animation: spin 2s linear infinite;
	-o-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
	z-index: 1001
	}

	#loader:before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #FFF;
	-webkit-animation: spin 3s linear infinite;
	-moz-animation: spin 3s linear infinite;
	-o-animation: spin 3s linear infinite;
	-ms-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite
	}

	#loader:after {
	content: "";
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #FFF;
	-moz-animation: spin 1.5s linear infinite;
	-o-animation: spin 1.5s linear infinite;
	-ms-animation: spin 1.5s linear infinite;
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite
	}

	@-webkit-keyframes spin {
	0% {
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg)
	}

	100% {
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg)
	}
	}

	@keyframes spin {
	0% {
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg)
	}

	100% {
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg)
	}
	}

	#loader-wrapper .loader-section {
	position: fixed;
	top: 0;
	width: 51%;
	height: 100%;
	background: #1abc9c;/* 背景色原 #1abc9c */
	z-index: 1000;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0)
	}

	#loader-wrapper .loader-section.section-left {
	left: 0
	}

	#loader-wrapper .loader-section.section-right {
	right: 0
	}

	.loaded #loader-wrapper .loader-section.section-left {
	-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);
	transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)
	}

	.loaded #loader-wrapper .loader-section.section-right {
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);
	transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)
	}

	.loaded #loader {
	opacity: 0;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out
	}

	/* 原版 load_title 是从上面飘出去，感觉太二了注销掉了，结束自动消失 */
	.loaded #loader-wrapper {
	visibility: hidden;
	/-webkit-transform: translateY(-100%);/
	/-ms-transform: translateY(-100%);/
	/transform: translateY(-100%);/
	/-webkit-transition: all .3s 1s ease-out;/
	/transition: all .3s 1s ease-out/
	}

	.no-js #loader-wrapper {
	display: none
	}

	.no-js h1 {
	color: #222
	}

	#loader-wrapper #load_title {
	font-family: 'Open Sans';
	color: #FFF;
	font-size: 19px;
	width: 100%;
	text-align: center;
	z-index: 9999999999999;
	position: absolute;
	top: 60%;
	opacity: 1;
	line-height: 30px
	}

	#loader-wrapper #load_title span {
	font-weight: normal;
	font-style: italic;
	font-size: 13px;
	color: #FFF;
	opacity: .5
	}

loading.js ( 基于 javascript，无需其他依赖，只能放在 body 内或者 body 后。推荐放在 body 第一行引入该 js！或者如果觉得在 body 里引 js 不太好的话，往下翻，我在后面还写了个方案 2）

	// 这个 js 建议放在 body 第一行
	document.body.innerHTML += ('<div id="loader-wrapper"><div id="loader"></div><div class="loader-section section-left"></div><div class="loader-section section-right"></div><div id="load_title">正在加载中，请稍后</div></div>');
	window.onload = function () {
	// 直接用等于可能覆盖原来的 class，所以采用原内容 + 空格 loaded。就算 body 原来没有 class 也不会报错
	document.body.className += ' loaded';
	}

代码安放位置 <font style="color: red;">(loading.css 建议放在 head 里，loading.js 必须放在 body 内或 body 后，越靠前效果越好，推荐放在 body 第一行)</font>

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<title>title</title>
	...
	<link rel="stylesheet" href="css/loading.css">
	...
	</head>
	<body>
	<script src="js/loading.js"></script>

	...
	...
	...

	</body>

<font style="color: red;"> 方案 2 不引入 js，而是在页面内实现代码逻辑 </font>
<font style="color: red;">CSS 还是同上不变，不需要引入方案 1 的 js，直接在 html 的 body 开头加上 <div id="loader-wrapper">...</div> , 在 body 末尾加 onload 事件，最终效果与方案 1 等价 </font>

	</font>
	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<title>title</title>
	...
	<!-- 引入 css -->
	<link rel="stylesheet" href="css/loading.css">
	...
	</head>
	<body>
	<!-- 手动加入 DIV#loader-wrapper -->
	<div id="loader-wrapper">
	<div id="loader"></div>
	<div class="loader-section section-left"></div>
	<div class="loader-section section-right"></div>
	<div id="load_title">正在加载中，请稍后</div>
	</div>

	...
	...
	...

	<script type="text/javascript">
	window.onload = function () {
	/* window 中所有元素加载完成后，给 body 加个 class -> loaded，也可以通过 jquery \|\| vue 实现等价代码 */
	document.body.className += ' loaded';
	}
	</script>
	</body>

ie8无法拉伸背景图

html5 页面加载loading 动画效果 第二弹(基于原生JS CSS)

html5 页面加载loading 动画效果第二弹(基于原生JS CSS)