对于比较加载比较慢的页面、大的图片、后台交互时间长等一系列需要等待的效果，加载中的提示出现会很有必要。本文主要对加载中的css效果，和加载进度的各类情况做一初步的调研。
1、利用css3制作加载中的效果
css3可以制作出非常漂亮的加载中的效果，这里只列出几个比较简单的加载中的效果制作过程。
（1）竖线的进度条效果：利用分别设置5个<li>的高度变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.loading{
width: 100px;
height: 100px;
border: 1px solid black;
}
.loading i{
width:6px;
height:50px;
margin:0 2px;
background:blue;
display:inline-block;
transform: scaleY(0.4);
animation:loop 0.8s infinite;
-webkit-animation:loop 0.8s infinite;
}
.loading i:nth-child(1){}
.loading i:nth-child(2){
animation-delay: 0.1s;
}
.loading i:nth-child(3){
animation-delay: 0.2s;
}
.loading i:nth-child(4){
animation-delay: 0.3s;
}
.loading i:nth-child(5){
animation-delay: 0.4s;
}
@keyframes loop{
0%,40%,100%{ transform: scaleY(0.4); }
20%{ transform: scaleY(1); }
}
</style>
</head>
<body>
<div class="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</body>
</html>(2) 转动的圆圈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#loading{
width: 100px;
height: 100px;
background: #FFFFFF;
border: 1px solid black;
}
#loading .pic{
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0 2px 0 #666;
animation: loop 1s infinite;
-webkit-animation: loop 1s infinite;
}
@keyframes loop{
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg ); }
}
</style>
</head>
<body>
<div id="loading">
<div class="pic"></div>
</div>
</body>
</html>2、利用页面的加载状态判断
页面加载状态改变时的事件：document.onreadystatechange
当前文档状态：document.readystate
有如下的状态：
（1）uninitialized-还未开始载入
（2）loading-载入中
（3）interactive-已加载，文档可以与用户开始交互
（4）complete-载入完成
document.onreadystatechange=function(){
if(document.readyState=="complete"){
$("loading").fadeOut()
}
}3、文件上传进度加载提示
onprogress事件是XMLHttpRequest的子对象XMLHttpRequestUpload中的一个事件。该事件每隔100ms向客户端返回一次数据，包括文件已上传的大小loaded和总大小total.
xhr.upload.onprogress = function(evt){
console.log(evt); //evt是onprogress事件的对象
}完整的html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 外层div 进度条的整体视觉和位置设置 -->
<div style="width:300px;height: 20px;border: 1px solid #CCC">
<!-- 内层div 逐渐递增的进度条 -->
<div id="jdt" style="height: 20px"></div>
</div><br>
<form action="" method="post" id="mainForm">
选择文件：
<input type="file" name="f">
<input type="button" value="上传" onclick="upload()">
</form>
<script type="text/javascript">
function upload(){
// 获取表单对象
var fm = document.getElementById("mainForm");
// 实例化FormData对象
var fd = new FormData(fm);
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// console.log(xhr);
// 调用open方法准备ajax请求
xhr.open('post','upfile.php');
var jdt = document.getElementById('jdt');
// 绑定onprogress事件
xhr.upload.onprogress = function(evt){
// console.log(evt);
// toFixed修正结果，只保留小数点后两位
// 计算上传大小的百分比
percent = (evt.loaded / evt.total).toFixed(2);
// 设置进度条样式
jdt.style.width = percent * 300 + 'px';
jdt.style.background = 'skyblue';
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
// 发送ajax请求
xhr.send(fd);
}
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。