js進度加載動畫程序是本人的個人作品，寫的不好，可以參考，但未經本人允許，請不要用於其它用途！
早上寫了個首頁進度加載動畫，本想在我的博客裡用上，測試發現博客園加載太快，根本看不到動畫效果，直接就加載‘Complete'了，算了，還是不要把博客搞得太臃腫了！
於是我就寫了個演示頁面，在body裡加了個iframe來加載大一點的網站，這樣就看出效果了！
用Safari打開貌似CSS動畫的播放時間變成同步了，不知道什麼原因，本地測試又沒問題（請大神指點！），用Chrome、Firefox倒是沒問題，而IE我沒測試過
加載時間統計我用了Windows對象的performance屬性，它是專門用來來計算精確時間的方法，這是MDN關於performance屬性的描述
本實例的實現原理比較簡單，不過不是真正的按文件大小來顯示加載進度的，只是在觸發document.onreadystatechange事件時，根據document.readyState的狀態來改變顯示進度的。其實還有一種靠譜一點的方法，用XMLHttpRequest對象的實例的progress事件，詳細解讀XMLHttpRequest，如：
var request = new XMLHttpRequest();
request.onprogress = function (e) {
if(e.lengthComputable){ //lengthComputable是指文件是否有大小，值為true、false
progress.innerHTML = Math.round(100* e.loaded/ e.total) + \'%\'; //loaded、total表示已經加載的大小和總大小
}
}
用以上方法實現起來也挺麻煩，而且也不能實現100%的真實加載進度，所以我索性就假一點了，不用他了！
本實例還用到了document.styleSheets[0].insertRule()方法，這裡有我對它的總結：用原生JS讀寫CSS樣式的方法總結
關於CSS動畫的實現，大家自己看代碼吧，很簡單的代碼，如果看的吃力，建議去補補CSS基礎了，介紹個干貨，CSS中文參考手冊網站，我表達能力有限，就不在這裡嚼口舌了
下面是完整代碼+演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蘇福的作品</title>
<script>
document.onreadystatechange = function () {
function $id(id){return document.getElementById(id)}
var width = 0,id,
preloader_line = $id('preloader_line').firstElementChild,
preloader = $id('preloader'),
preloader_center = $id('preloader_center'),
preloader_btn = $id('preloader_btn'),
preloader_loading = $id('preloader_loading');
if (document.readyState == "interactive") {
loading(1,110,50);
}
if (document.readyState == "complete") {
loading(5,120,16.7);
preloader_loading.id = 'preloader_loaded';
preloader_loading.innerHTML = 'Loading Complete'+'<br/>'+'Using: '+performance.now().toFixed(3)+' ms';
preloader_btn.innerHTML = 'E N T E R';
preloader_btn.style.borderBottom = '4px solid green';
preloader_btn.style.fontStyle = 'inherit';
preloader_btn.style.fontSize = '24px';
if(document.styleSheets[0].insertRule){
document.styleSheets[0].insertRule('#preloader_btn:hover{border-bottom: 4px solid green;border-radius: 60px;color: red;}',0);
}else{//兼容IE9以下
document.styleSheets[0].addRule('#preloader_btn:hover{border-bottom: 4px solid green;border-radius: 60px;color: red;}',0);
}
preloader_btn.onclick = function () {
var opacity = 1,id;
function hide(){
if(opacity<=0){
clearTimeout(id);
preloader.style.display = 'none';
document.body.style.overflow = 'auto';
return;
}
opacity -= 0.1;
preloader.style.opacity = opacity;
id = setTimeout(function(){
hide();
},50);
}
hide();
};
}
function loading(step,max,time){
if(width>=max){
clearTimeout(id);
if(max >= 120){
preloader_line.parentNode.style.display = 'none';
}
return;
}
width += step;
preloader_line.style.width = width+'px';
id = setTimeout(function(){
loading(step,max,time);
},time);
}
};
</script>
<style>
body{
overflow: hidden;
}
#preloader{
position: absolute;
width: 100%;
height: 100%;
background-color: white;
z-index: 999;
}
#preloader_center{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 150px;
height: 75px;
margin:auto;
}
#preloader_loading{
position: absolute;
left: 0;
right: 0;
top: 45px;
margin: auto;
width: 96px;
height: 30px;
}
#preloader_loaded{
position: absolute;
left: 0;
right: 0;
top: 45px;
margin: auto;
font-size: 12px;
text-align: center;
line-height: 30px;
}
#preloader_loading span{
position: absolute;
width: 10px;
height: 2px;
top: 0;
bottom: 0;
margin:auto;
background-color: #9b59b6;
animation: loading 1.5s infinite ease-in-out ;
}
#preloader_loading span:nth-child(2){
left: 12px;
animation-delay: .1s;
}
#preloader_loading span:nth-child(3){
left: 24px;
animation-delay: .2s;
}
#preloader_loading span:nth-child(4){
left: 36px;
animation-delay: .3s;
}
#preloader_loading span:nth-child(5){
left: 48px;
animation-delay: .4s;
}
#preloader_loading span:nth-child(6){
left: 50px;
animation-delay: .5s;
}
#preloader_loading span:nth-child(7){
left: 62px;
animation-delay: .6s;
}
#preloader_loading span:nth-child(8){
left: 74px;
animation-delay: .7s;
}
#preloader_loading span:nth-child(9){
left: 86px;
animation-delay: .8s;
}
@keyframes loading {
0%{height: 2px;background:#9b59b6;}
15%{height: 20px;background:#3498db;}
50%{height: 2px;background:#9b59b6;}
100%{height: 2px;background:#9b59b6;}
}
iframe{width: 100%;height: 1000px;}
#preloader_btn{
position: absolute;
left: 0;
right: 0;
top: 0;
margin:auto;
display: block;
width: 122px;
height: 40px;
font-size: 14px;
text-align: center;
line-height: 40px;
cursor: pointer;
color: #9b59b6;
font-style: italic;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#preloader_line{
position: absolute;
left: 0;
right: 0;
top: 40px;
margin:auto;
width: 120px;
height: 2px;
border: 1px solid green;
}
#preloader_line span{
display: block;
height: 2px;
width: 0;
background-color: green;
}
</style>
</head>
<body>
<div id="preloader">
<div id="preloader_center">
<span id="preloader_btn">Loading...</span>
<span id="preloader_line">
<span></span>
</span>
<div id="preloader_loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<iframe src="http://jd.com"></iframe>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。